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

时间:2015-07-09 13:59:57

标签: javascript jquery asp.net-mvc razor ajax.beginform

我喜欢在我的asp.net mvc web应用程序中使用Ajax助手。我经常使用Ajax.BeginFormAjax.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助手的角色。它会对Ajax.ActionLink&amp;同样,当提交表单时,它将执行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设置进行硬编码;每个ajax助手组件上都有InsertionModeUpdateTargetIdOnSuccess="detailsuccess"等。

那么有人可以就使用这两种方法的利弊提出建议吗?

1 个答案:

答案 0 :(得分:2)

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

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

正如他们在视频中解释的那样,ActionLink了解路由,它了解您的模型并在您更改路由时自动生成正确的URL。 UrlAction不会,它只会创建您在代码中指定的网址。

顺便说一句,这是所有html-helpers的真正优势。它们是内置的,并且知道您的应用程序正在发生什么。