不能让过去“A jQuery脚本引用必须为了使Ajax支持在”的WebGrid“帮手”(Can

2019-09-28 06:39发布

站内文章 / 移动开发
32 0 0

我有一个类似的用户在这里： ASP.NET MVC 3.0的WebGrid -支持AJAX在这里： http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/22be0501-1b0b-496a- 9d0c-f9f5138996ac

但是，没有一个建议，由这些线程在这里帮助。

细节：当我在本地调试器我的Windows 7 / IIS 8机器上运行，我收到消息的AJAX回发后试图更新“A jQuery脚本参考，以使‘的WebGrid’帮手Ajax支持是必需的” 。 相同的代码但不会导致在FF的问题或使用IE针对版本的服务器上运行的相同的代码的时（IIS 6）。 为了使它更加混乱，当我第一次写这个代码，我从未有过这样的问题-它最近才开始抛出错误。

当错误发生时，“正确的”内容更新整个页面之前，屏幕上闪烁重定向到只是局部视图，并引发在屏幕上弹出。 这就像它工作正常，但东西然后复位，并导致其停止使用AJAX。

为了尝试解决我取代的jQuery的通过代码的完整版本和步骤.min版本。 在调试jQuery的行为有所不同，并触发一个“ajaxStop”，是因为在全球AJAX计数器的值。 当我对运行在同一个IE浏览器相同的代码的服务器版本的外部脚本调试程序，这似乎并没有发生（尽管我仍然有服务器上的“分”的版本，所以无法清楚地看到）。 正是这种ajaxStop这似乎是强迫的WebGrid认为jQuery是没有加载的页面上，并没有让AJAX行为“大棒” - 迫使只是局部视图的一个新的页面加载。

我的页面是不是超简单：主要看有部分含有若干意见的div - divSearch包含这是一个调用AJAX回传搜索局部视图，并divList包含需要基于搜索结果将被更新的网格。 由搜索局部视图称为控制器方法呈现用于搜索结果转换成字符串“新的”的内容并将其发送回作为JsonResult，然后将其分配给通过jQuery的divList的HTML的一部分。 （我用这个技术在应用的几个地方，我已经验证字符串被发送回用于部分观点正确的内容）。

jQuery的（和其他所有JS包括）可在布局页面的顶部，并且之前的任何的局部视图渲染。

主要观点： 

 @model WebUI.Areas.Admin.Models.Client.ManageClientsModel
 @{
    ViewBag.Title = "ManageClients";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<style type="text/css">
.inv
{
    visibility: hidden;
}
.vis
{
    visibility: visible; 
}
</style>

<h2>ManageClients</h2>
<div id="divSearch">
    @Html.Partial("_ClientSearch", Model.ClientList)
</div>
<div id="divList">
    @Html.Partial("_ClientList", Model.ClientList)
</div>
<br/>
<div id="newSection">

    <div id="divEdit"> <button class="toggleNew">
       Add Client
       </button>
    </div>
    div class="inv" id="divNew">  @Html.Partial("_Create", Model.ClientVM ) </div>
</div>
<script type="text/javascript">
   $(function () {
    $(".toggleNew").click(function () {
        $("#divNew").toggleClass("inv");
        return false;
    });
   });

</script>

客户端搜索部分： 

 @using  Core.Entities
 @model  WebUI.Areas.Admin.Models.Client.ClientListViewModel
 <div id="clientSearch">
     <form action="@Url.Action("JsonSearch","Client", new { area = "Admin"})"  
                 onsubmit="return formSearchSubmit(this);"  >
         <div class="divReturnErrors"></div>
     @if(TempData["SearchName"] == null)
     {
         TempData["SearchName"] = Model.SearchName;
     }
         <br/>
         @Html.LabelFor(model => model.SearchName, "Search for client name:")
         @Html.EditorFor(model => model.SearchName)
          <input type="submit" value="Search" name="btnSearch"   />
     </form>
 </div>
 <script type="text/javascript">
   function formSearchSubmit(formToSubmit) {
     //this line submits the form data to the JsonSearch method
      $.post($(formToSubmit).attr("action"),
             { SearchName: $(formToSubmit).find("#SearchName").val() },
        function (data) {  //this is the callback from JsonSearch
                                        // that handles the results.
          if (data["IsSuccess"] == undefined || data["IsSuccess"] == false)
            $('div.divReturnErrors').html(data["Errors"]); 
                              //put errors in divReturnErrors
          else { //if it succeeds we stuff the string containing the 
                              //partial view into the _ClientList control's div to 
                             //replace previous grid.
                    $("#divList").html(data["PartialViewHtml"]);
                }
            }, "json");

                       return false;
             }  
</script>

客户名单局部视图

 @model WebUI.Areas.Admin.Models.Client.ClientListViewModel
 <h2>Clients</h2>
  @helper TrueFalseToYesNo(bool val) {
    if (val)
    {
       <span>Yes</span>
    }
    else
    {
       <span>No</span>
    }
   }
<div id="clientListing">

  @{
    if(Model.SearchName != null)
    {
        TempData["SearchName"] = Model.SearchName;
    }

    var grid = new WebGrid<NeedleFinder.Core.Entities.Client>(null, rowsPerPage: 10, 
              canSort: false, defaultSort: "ClientName", 
                       ajaxUpdateContainerId:"clientListing");
    grid.Bind(Model.Clients, rowCount: Model.TotalRows, autoSortAndPage: false);
    @grid.GetHtml(htmlAttributes: new {id= "clientListing"},
        tableStyle: "table90",
        alternatingRowStyle: "duncanTableAltRows",
        headerStyle: "duncanTableHeaders",
        columns: grid.Columns(
            grid.Column(columnName: "Client ID", style: "logcolumn", 
                    format: item =>              
                    @Ajax.ActionLink(((object)item.ClientID).ToString(), 
                    Model.LinkAction, new { id = item.ClientID }, new AjaxOptions { 
                    HttpMethod = "GET", UpdateTargetId = "divEdit", InsertionMode = 
                    InsertionMode.Replace })),
            grid.Column(columnName: "ClientName", style: "logcolumn"),
            grid.Column(columnName: "Abbreviation", style: "logcolumn"),
            //grid.Column(columnName: "IsActive", style: "logcolumn")
            grid.Column(columnName: "IsActive", style: "logcolumn", 
               format: item => @TrueFalseToYesNo(item.IsActive))
            )
               )
       }
</div>

的 '错误' 是发生在这条线：$（ “＃divList”）HTML（数据[ “PartialViewHtml”]）;。 从客户端搜索部分观点AJAX回调函数。 这条线跳入jQuery和，而在有呼叫ajaxStop。

请注意，我已经采纳了其他线程的建议（jQuery包含在顶部，把的WebGrid与同名的ajaxUpdateContainer目标一格，添加一个id属性具有相同的名称，以及该的WebGrid该建议显式装载部分中的document.ready似乎并不适用于我，因为我试图填充这个div基于输入，而不是只是普通的加载默认的“得到”的局部视图的版本的字符串。

下面是网页呈现的HTML首次加载时（当你做了ajax后反正它不更新）：（很抱歉没能靠不住的格式，但增加4个缩进到每一行并没有真正干净的工作） 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ManageClients</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.18.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.js" type="text/javascript"></script>
<script src="/Scripts/jQuery.Validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
</head>
<script type="text/javascript">

$(document).ready(function () {
    $('.dateEditor').datepicker({ dateFormat: "mm/dd/yy" });
});

//This function should be called in your ajax post return are staying on same page
     after success and/or you do have server side errors that couldn't have been found
//if there were still client side errors, otherwise you will still have the previous 
 validation errors.

function ClearValidationErrors() {

    var container = $('form').find('[data-valmsg-summary="true"]');
    var list = container.find('ul');

    if (list && list.length) {
        list.empty();
        container.addClass('validation-summary-valid').removeClass('validation-summary-
         errors');
    }
}


</script>
<body>
<style type="text/css">
#topbar
{
    background-color: Black;
    margin: 0px;
    padding: 5px;
}

#adminmenu_nav a
{
    float: left;
    width: 150px;
}

.logcolumn
{
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #BBBBBB;
}

</style>
<script>
$(function () {
    $("#adminmenu_nav a").button();
    $("#optionsPanel input").button();
    $(".asButton input").button();
});
</script>
<div id="topbar">
<img style="margin-left:20px" src="/Content/Images/Logos/NFWhite.png" 
alt="NeedleFinder" />
</div>
<div>
<div id="adminmenu_nav" style="float: left">
    <table>
        <tr><td><a href="/Admin/Client/ManageClients">Clients</a></td></tr>
        <tr><td>Cases</td></tr>
        <tr><td><a href="/Admin/User/ManageUsers">Users</a></td></tr>
        <tr><td>Roles</td></tr>
        <tr><td><a href="/Admin/Logging/Summary">Logs</a></td></tr>
    </table>
</div>
<div style="overflow: hidden">
    <span class="validation-summary-errors"></span>
    <style type="text/css">
.inv
{
  visibility: hidden;
}
.vis
{
    visibility: visible; 
}
</style>

<h2>ManageClients</h2>
<div id="divSearch">
  <div id="clientSearch">
   <form action="/Admin/Client/JsonSearch" onsubmit="return formSearchSubmit(this);"  >
        <div class="divReturnErrors"></div>
        <br/>
        <label for="SearchName">Search for client name:</label>
        <input class="text-box single-line" id="SearchName" name="SearchName" 
          type="text" value="" />
         <input type="submit" value="Search" name="btnSearch"   />
    </form>
</div>
<script type="text/javascript">
function formSearchSubmit(formToSubmit) {
    //this line submits the form data to the JsonSearch method
    $.post($(formToSubmit).attr("action"),
            { SearchName: $(formToSubmit).find("#SearchName").val() },
        function (data) {  
        if (data["IsSuccess"] == undefined || data["IsSuccess"] == false)
            $('div.divReturnErrors').html(data["Errors"]); 
         else 
                     { 
            $("#divList").html(data["PartialViewHtml"]);
        }
    }, "json");

    return false;
    }  
</script>
</div>
<div id="divList">
  <h2>Clients</h2>

  <div id="clientListing">

<script type="text/javascript">if (typeof(jQuery)=='undefined') alert("A jQuery script 
reference is required in order to enable Ajax support in the \"WebGrid\" helper.");
</script><table class="table90" id="clientListing"><thead><tr 
  class="duncanTableHeaders"><th scope="col">Client ID</th><th 
  scope="col">ClientName</th><th scope="col">Abbreviation</th><th 
  scope="col">IsActive</th></tr></thead><tfoot><tr><td colspan="4">1 <a href="#" 
  onclick="$(&#39;#clientListing&#39;).load(&#39;/Admin/Client/ManageClients?page=2&
  amp;__=634750282355486955 #clientListing&#39;);">2</a> <a href="#" 
  onclick="$(&#39;#clientListing&#39;).load(&#39;/Admin/Client/ManageClients?page=3&
  amp;__=634750282355506956 #clientListing&#39;);">3</a> <a href="#" 
  onclick="$(&#39;#clientListing&#39;).load(&#39;/Admin/Client/ManageClients?page=4&
  amp;__=634750282355516957 #clientListing&#39;);">4</a> <a href="#" 
  onclick="$(&#39;#clientListing&#39;).load(&#39;/Admin/Client/ManageClients?page=5&
  amp;__=634750282355536958 #clientListing&#39;);">5</a> <a href="#" 
  onclick="$(&#39;#clientListing&#39;).load(&#39;/Admin/Client/ManageClients?page=2& 
  amp;__=634750282355546959 #clientListing&#39;);">&gt;</a> </td></tr></tfoot><tbody>
  <tr><td class="logcolumn"><a data-ajax="true" data-ajax-method="GET" data-ajax-
  mode="replace" data-ajax-update="#divEdit" href="/Admin/Client/_Edit/2042">2042</a>
  </td><td class="logcolumn">ABC Legal</td><td class="logcolumn">ABC123</td><td 
  class="logcolumn">           <span>Yes</span>

  </td></tr><tr class="duncanTableAltRows"><td class="logcolumn"><a data-ajax="true" 
  data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divEdit" 
  href="/Admin/Client/_Edit/2044">2044</a></td><td class="logcolumn">ABC Legal 
  3</td><td class="logcolumn">ABC125</td><td class="logcolumn">           
  <span>Yes</span>

  </td></tr><tr><td class="logcolumn"><a data-ajax="true" data-ajax-method="GET" 
  data-ajax-mode="replace" data-ajax-update="#divEdit" href="/Admin/Client/_Edit
  /2045">2045</a></td><td class="logcolumn">ABC Legal 4b</td><td 
  class="logcolumn">ABC4bb</td><td class="logcolumn">           <span>Yes</span>

  </td></tr><tr class="duncanTableAltRows"><td class="logcolumn"><a data-ajax="true" 
  data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divEdit" 
  href="/Admin/Client/_Edit/2047">2047</a></td><td class="logcolumn">ABC Legal 
  6</td><td class="logcolumn">ABC6</td><td class="logcolumn">           <span>No</span>

  </td></tr><tr><td class="logcolumn"><a data-ajax="true" data-ajax-method="GET" 
  data-ajax-mode="replace" data-ajax-update="#divEdit" href="/Admin/Client/_Edit
  /2048">2048</a></td><td class="logcolumn">ABC Legal 7</td><td 
  class="logcolumn">ABC7</td><td class="logcolumn">           <span>Yes</span>

  </td></tr><tr class="duncanTableAltRows"><td class="logcolumn"><a data-ajax="true"   
  data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divEdit" 
  href="/Admin/Client/_Edit/2049">2049</a></td><td class="logcolumn">ABC Legal 
  8a</td><td class="logcolumn">ABC8a</td><td class="logcolumn">           
  <span>Yes</span>

  </td></tr><tr><td class="logcolumn"><a data-ajax="true" data-ajax-method="GET" 
  data-ajax-mode="replace" data-ajax-update="#divEdit" href="/Admin/Client/_Edit
  /2050">2050</a></td><td class="logcolumn">ABC Legal 9</td><td 
  class="logcolumn">ABC9</td><td class="logcolumn">           <span>Yes</span>

  </td></tr><tr class="duncanTableAltRows"><td class="logcolumn"><a data-ajax="true" 
  data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divEdit" 
  href="/Admin/Client/_Edit/2043">2043</a></td><td class="logcolumn">ABC 
  Legal2</td><td class="logcolumn">ABC124</td><td class="logcolumn">           
  <span>Yes</span>
  </td></tr><tr><td class="logcolumn"><a data-ajax="true" data-ajax-method="GET" 
  data-ajax-mode="replace" data-ajax-update="#divEdit" href="/Admin/Client/_Edit
  /2046">2046</a></td><td class="logcolumn">ABC Legal5</td><td 
  class="logcolumn">ABC5</td><td class="logcolumn">           <span>Yes</span>
  </td></tr><tr class="duncanTableAltRows"><td class="logcolumn"><a data-ajax="true" 
  data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#divEdit" 
  href="/Admin/Client/_Edit/2051">2051</a></td><td class="logcolumn">ACE Legal 
  1</td><td class="logcolumn">ACE1</td><td class="logcolumn">           
  <span>Yes</span>

  </td></tr></tbody></table></div>


  </div>
<br/>
<div id="newSection">

   <div id="divEdit"> <button class="toggleNew">
     Add Client
  </button></div><!-- placeholder for _Edit., will replace button when editing//-->
  <div class="inv" id="divNew">
 <form action="/Admin/Client/JsonCreate" onsubmit="return formCreateSubmit(this);">
  <div>
    <div class="titleText">Add Client</div>
    <div class="divClientSideVal">
    <div class="validation-summary-valid" data-valmsg-summary="true"><ul><li 
      style="display:none"></li>
    </ul></div>
    </div>
    <div class="divCreateErrors"></div>
    <fieldset>
        <table>

            <tr>
                <td>
                    <label for="CurrentClient_ClientName">Name</label>
                </td>
                <td><input data-val="true" data-val-length="Client Name must be 50 
                       characters or fewer" data-val-length-max="50" data-val-
                      required="Client Name is required." 
                     id="CurrentClient_ClientName" name="CurrentClient.ClientName" 
                      style="width: 120px;" type="text" value="" /> 
                </td>
                <td><span class="field-validation-valid" data-valmsg-
               for="CurrentClient.ClientName" data-valmsg-replace="false">*</span></td>
            </tr>
            <tr>
                <td>
                    <label for="CurrentClient_Abbreviation">Abbreviation</label>
                </td>
                <td><input data-val="true" data-val-length="Abbreviation must be 6 
                characters or fewer" data-val-length-max="6" data-val-
                required="Abbreviation is required." id="CurrentClient_Abbreviation" 
                name="CurrentClient.Abbreviation" style="width: 120px;" type="text" 
                value="" />
                </td>
                <td><span class="field-validation-valid" data-valmsg-
               for="CurrentClient.ClientName" data-valmsg-replace="false">*</span></td>
            </tr>
            <tr>
                <td>
                    <label for="CurrentClient_IsActive">Is Active:</label>
                </td>
                <td>

                <input data-val="true" data-val-required="The IsActive field is 
                required." id="CurrentClient_IsActive" name="CurrentClient.IsActive" 
                 type="checkbox" value="true" /><input name="CurrentClient.IsActive" 
                  type="hidden" value="false" />
                </td>
            </tr>
            <tr>
                <td>Enable for installations:</td>
                <td>
                    <select Multiple="multiple" id="SelectedInstallations" 
              multiple="multiple" name="SelectedInstallations" style="width: 
               120px;">       
                 <option value="1">Dev</option>
                 <option value="2">FakeDev</option>
                </select>
                </td>
            </tr>
        </table></fieldset>
    <p>
        <input type="submit" value="Create" name="btnCreate"  />
    </p>
</div>
</form>

<script type="text/javascript">


function formCreateSubmit(formToSubmit) {

    var installations = "";
    $('#SelectedInstallations option').each(function (i) {
        if (this.selected == true) {
            if (installations.length > 0) {
                installations += ",";
            }
            installations += this.value;
        }
    });

    //this line submits the form data to the JsonCreate method
    $.post($(formToSubmit).attr("action"),
            { ClientName: $(formToSubmit).find("#CurrentClient_ClientName").val(),
                Abbreviation:  
               $(formToSubmit).find("#CurrentClient_Abbreviation").val(),
                IsActive: 
             $(formToSubmit).find("#CurrentClient_IsActive").is(':checked'),
                SelectedInstallations: installations,
                Action: "Create"
            },
    function (data) {  
    if (data["IsSuccess"] == undefined ||  data["IsSuccess"] == false)
    {
       if (data["Errors"] != undefined &&                          
                   data["Errors"].length > 0) 
                {
                        ClearValidationErrors();                    

     ('div.divCreateErrors').html(data["Errors"]);                      
      } else {
$('div.divCreateErrors').html("");
   }

} else { 
        window.location = "/Admin/Client/ManageClients";
    }
}, "json");

    return false;
   }
</script> </div><!-- placeholder for _Create //-->
</div>
<script type="text/javascript">
   $(function () {
    $(".toggleNew").click(function () {
        $("#divNew").toggleClass("inv");
        return false;
    });
   });

</script>



  </div>
</div>
  <div class="InternalMenu"><a href="/Admin/Logging">Logging</a> - <a href="/Admin
          /Client/ManageClients">Client</a></div>
  </body>
</html>

任何建议，将不胜感激，因为我很为难，什么原因造成的问题。

Answer 1:

好了 - 我想通了这个问题，所以我身材会报到。

这个问题实际上是多比MVC的jQuery相关的，但它与我是如何把我的搜索一起形成问题。

我有我的搜索按钮设定类型=提交，也有一个的onsubmit事件处理程序做了ajax回发。 什么正在发生的是，阿贾克斯回发在做什么它应该，但是，当它完成，提交被触发“获取”，并在控制器的搜索形式的回报只是一个PartialViewResult“获取”处理程序 - >等等这被更换屏幕内容作为一个正常的负载。 是抛出的错误，因为局部视图没有布局与包括。

因此，修复是一）改变按钮类型为“键” b）从所述形式声明c取出“的onsubmit”）添加一个id =“frmSearch”来的形式（为了便于选择性）d）修改formSearchSubmit取从$动作（“＃frmSearch”）。行动，而不是从该函数的参数（这是一个按钮，而不是形式）。

在此之后，它正确提交的AJAX和后处理的回报更新W / O触发另一个提交表单的。



文章来源: Can't get past “A jquery script reference is required in order to enable Ajax support in the ”WebGrid“ helper”
标签： asp.net-mvc-3 model-view-controller jquery webgrid
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~