javascript - 使用 Ajax 帮助程序与使用常规 html 和 jQuery 代码

Question

我喜欢在我的 asp.net mvc Web 应用程序中使用 Ajax 助手。我用过Ajax.BeginForm和Ajax.Actonlink频繁地。但我最近发现了一种更标准、更可维护的方式来管理我的表单和链接。因此，不要编写诸如以下内容:-

@Ajax.ActionLink("Show Servers", "CustomerServer","Customer",
    new {customerID = Model.AccountDefinition.ORG_ID},
    new AjaxOptions {
 InsertionMode = InsertionMode.Replace,
 UpdateTargetId = "detail"  ,
 LoadingElementId = "progress",

 OnSuccess="detailsuccess",



}
)

我可以定义一个常规<a>并按如下方式定义其目标网址:-

<a data-modal='' href="@Url.Action("CustomerServer","Customer", new {customerID = Model.AccountDefinition.ORG_ID})"   title='GetListCustomer'>  Show Servers</a>

然后定义一个 javascript，如下所示，它将扮演 Ajax 助手的 Angular 色。它将执行与 Ajax.ActionLink 类似的调用而且当提交表单时，它将执行由 Ajax.Beginform 生成的类似调用使用bindForm(this);函数，如下:-

  $(document).on('click', 'a[data-modal]', function (e){
            $('#myModalContent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {
                $('#myModal').modal({
                    //code goes here..
                    handle: ".modal-header"
                });
                $('#myModalContent').removeData("validator");
                $('#myModalContent').removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse('#myModalContent');
                bindForm(this);
              $("input[data-autocomplete-source]").each(function () {
                  var target = $(this);
                    target.autocomplete({
                        source: target.attr("data-autocomplete-source"), minLength: 1, delay: 1000, appendTo: $("#myModal")



                   });

                });
            });
            return false;
        });


    });



    });
    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", "disabled");
            $('#progress').show();
            if ($(this).valid()) {

                $.ajax({
                   //code goes here


                                });

                            });
                        }
                    }
                });
            }

        });
    }
});

我发现第二种方法更标准且可维护。特别是因为我不必对每个 ajax.actionlink 上的 ajax 设置进行硬编码; InsertionMode , UpdateTargetId , OnSuccess="detailsuccess"等每个 ajax 帮助器组件。

那么有人可以就使用这两种方法的优缺点提出建议吗？

Answer 1

我或多或少地问过自己同样的事情。然后我偶然发现了一个非常有趣的 Microsoft Jump Start 视频，内容是 Developing ASP.NET MVC 4 Web Applications 。

查看开发 ASP.NET MVC View 一章。您将在第 2 课:使用 HTML 帮助程序中找到答案。

<小时/>

正如他们在视频中所解释的，ActionLink 理解路由，它理解您的模型，并在您更改路由时自动生成正确的 URL。 UrlAction 不会，它只是创建您在代码中指定的 url。

顺便说一句，这是所有 html 帮助程序的真正优势。它们是内置的，知道您的应用程序发生了什么。