Question

我在asp.net mvc网络应用程序的部分视图中遇到问题。因为jQuery脚本不适用于部分视图，而它们适用于常规视图。例如，我有以下脚本，同时将在模态弹出窗口中显示返回的部分视图： -

$(document).ready(function () {

    $(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {

            $('#myModalContent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {
                $('#myModal').modal({
                    //height: 1000,
                    //width: 1200,
                    //resizable: true,
                    keyboard: true
                }, 'show');
                $('#myModalContent').removeData("validator");
                $('#myModalContent').removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse('#myModalContent');
                bindForm(this);
            });
            return false;
        });


    });

我添加了一些链接，例如，对于上面的脚本，我的Razor视图中有： -

 <a data-modal='' href="@Url.Action("Delete","SecurityRole",new{id = item.SecurityRoleID })"   id="@item.SecurityRoleID" title="Delete">

，操作方法是： -

 public async Task<ActionResult> Delete(int? id)
        {

SecurityRole securityrole = await uniteofwork.SecurityRoleRepository.FindSecurityRole(id.Value);

            if (Request.IsAjaxRequest()) {

                return PartialView(securityrole);
            }
            return View(securityrole);
        }

现在假设我在WebGrid中有<a data-modal=''链接，然后当我首次加载WebGrid时点击链接，脚本将导致部分视图显示在模型弹出窗口内，没有任何问题。但是如果我在WebGrid中进行一些基于ajax的分页或排序，并且我点击了<a data-modal=''链接，那么脚本将不会触发，<a data-modal=''链接将发送正常的http请求到动作方法，因此将返回普通视图。任何人都可以尝试如何强制上面的jQuery来理解jQueryscrip加载后呈现的局部视图？

问题＃2 我正在开发一个asp.net mvc 5.2.2 Web应用程序。我编写了以下脚本，在模型弹出窗口中显示局部视图，并应用自动完成： -

$(document).ready(function () {

    $(function () {
        $.ajaxSetup({ cache: false });
        //$("a[data-modal]").on("click", function (e) {
            $(document).on('click', 'a[data-modal]', function (e){
            $('#myModalContent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {
                $('#myModal').modal({
                    //height: 1000,
                    //width: 1200,
                    //resizable: true,
                    keyboard: true
                }, 'show');
                $('#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



                    });

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


    });
    $(function () {

        //$("a[data-modal]").on("click", function (e) {
        $(document).on('click', 'button[data-dismiss]', function (e) {
            location.reload();
        });


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

                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                       if (result.ISsuccess) {
                            $('#myModal').modal('hide');
                            $('#progress').hide();
                            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                            location.reload();
                            //  alert('www');
                        } else {

                            $('#progress').hide();
                            $('#myModalContent').html(result);
                            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                            bindForm();
                        }
                    }
                });
            }
            else {
                $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                $('#progress').hide();
                return false;
            }

            return false;
        });
    }
});

将应用自动填充的字段如下所示： -

<h3 style="color:#f99406" >Assign Customers To Skill</h3>

     @using (Html.BeginForm("AssignSingleCustomerToSkill", "Skill"))
{
     @Html.AntiForgeryToken()
     @Html.ValidationSummary(true)
<div class="form-horizontal">
<div class="form-group"> 
    @Html.Hidden("ID")
<label class = "control-label col-md-2" >Customer Name</label>
<div class="col-md-10 ">
***<input  name="term" type="text" data-val="true" data-val-required= "Please enter a value." class="form-control" data-autocomplete-source= "@Url.Action("AutoComplete", "Customer")"  />*** 
<span class="field-validation-valid" data-valmsg-for="term" data-valmsg-replace="true"></span></div>
</div>              


      <div class="form-group">
            <div class="col-md-offset-0 col-md-10">

<input class="btn btn-primary" type="submit" value="Assign Single Customer" /> </div></div>

</div>

    }

现在当我在模型弹出窗口中渲染局部视图时，我开始在自动填充字段内输入，将调用自动完成操作方法，并使用F12开发人员工具我可以看到将收到响应，但是问题是在自动完成字段中不会显示任何项目。

enter image description here

如果我将视图渲染为常规视图（而不是局部视图），我将不会遇到蚂蚁问题。

这是我在布局视图中引用的css： -

 bundles.Add(new StyleBundle("~/Content/cssTemplate").Include(
  "~/css/bootstrap-cerulean.min.css" ,
"~/css/charisma-app.css",
"~/bower_components/fullcalendar/dist/fullcalendar.css",
"~/bower_components/fullcalendar/dist/fullcalendar.print.css",
"~/bower_components/chosen/chosen.min.css",
"~/bower_components/colorbox/example3/colorbox.css",
"~/bower_components/responsive-tables/responsive-tables.css",
"~/bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css",
"~/css/jquery.noty.css",
"~/css/noty_theme_default.css",
"~/css/elfinder.min.css",
"~/css/elfinder.theme.css",
"~/css/jquery.iphone.toggle.css",
"~/css/uploadify.css",
"~/css/animate.min.css",
           "~/Content/themes/base/core.css",            
              "~/Content/themes/base/autocomplete.css",            
              "~/Content/themes/base/theme.css"   ,
              "~/Content/site.css"
                ));

任何人都可以这样做吗？

由于

JQuery Scripts不支持asp.net mvc部分视图

0 个答案: