1
내가 여기에 사용자와 유사한를 데 "A JQuery와 스크립트 참조가에서의 Ajax 지원을 활성화하기 위해 필요" 그러나 그 스레드의 제안은 여기에서 도움이되지 않습니다.과거 가져올 수 없습니다 WebGrid "도우미"
세부 사항 : Windows 7/IIS 8 시스템에서 로컬 디버거를 실행할 때 'ajax를 사용한 후에'WebGrid "도우미 메시지에서 Ajax 지원을 사용하려면 'A jQuery 스크립트 참조가 필요합니다. 업데이트를 시도하는 포스트 백. 그러나 동일한 코드는 FF 나 서버에서 실행중인 동일한 코드 버전에 대해 IE를 사용할 때 문제가되지 않습니다 (IIS 6). 더 혼란스럽게 만들기 위해 처음에 이 코드를 작성했을 때, 나는이 문제를 전혀 경험하지 못했습니다. 단지 최근에 오류가 발생하기 시작했습니다.
오류가 발생하면 전체 페이지가 부분보기로 리디렉션되고 화면에 팝업이 표시되기 전에 '올바른'업데이트 된 내용이 화면에 깜박입니다. 마치 제대로 작동하지만 뭔가가 재설정되어 아약스를 사용하지 않게됩니다.
문제를 해결하려면 jquery의 .min 버전을 전체 버전으로 교체하고 코드를 단계별로 실행하십시오. 디버거에서 jQuery는 다르게 동작하고 전역 ajax 카운터의 값으로 인해 "ajaxStop"을 트리거합니다. 동일한 IE 브라우저에서 동일한 코드의 서버 버전에 대해 외부 스크립트 디버거를 실행할 때 이것은 발생하지 않는 것처럼 보입니다 (서버에 '최소'버전이 있어도 정확하게 볼 수는 없지만). 이 ajaxStop은 webgrid가 jQuery가 페이지에로드되지 않고 ajax 비헤이비어를 '스틱'으로 만들지 않는다고 생각하게 만듭니다. 부분 뷰의 새로운 페이지로드가 필요합니다.
내 페이지는 매우 단순하지 않습니다. 기본보기에는 부분보기가 포함 된 여러 div가 있습니다. - divSearch에는 ajax 포스트 백을 호출하는 부분보기가 포함되어 있으며 divList에는 검색을 기반으로 업데이트해야하는 표가 포함되어 있습니다. 결과. 검색 부분보기에서 호출 된 컨트롤러 메서드는 검색 결과의 '새'내용을 문자열로 렌더링 한 다음 JsonResult의 일부로 다시 보낸 다음 jsonResult의 일부로 보내고 jsonResult는 jQuery를 통해 divList의 html에 할당됩니다. (나는이 기술을 응용 프로그램의 여러 위치에서 사용하며, 문자열이 부분 뷰의 올바른 내용 인임을 확인했습니다.
jQuery (및 다른 모든 j 포함)는 레이아웃 페이지의 맨 위에 있으며 부분 뷰보다 먼저 렌더링됩니다.
홈페이지보기 : 부분
@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 (data ["PartialViewHtml "]); 클라이언트에서 부분보기 ajax 콜백 기능을 검색하십시오. 이 줄은 jQuery로 점프하고 거기에있는 동안 ajaxStop을 호출합니다.
다른 스레드 (jQuery는 맨 위에 ajaxUpdateContainer 대상과 동일한 이름의 div에 webgrid를 넣고 동일한 이름의 webgrid에 id 속성을 추가 함)을 제안했습니다. 잘.이 div를 부분 뷰의 기본 'get'버전을 일반로드하는 대신 입력을 기반으로 문자열로 채우려고하기 때문에 document.ready에서 부분을 명시 적으로로드하라는 제안이 적용되지 않는 것 같습니다.
다음은 처음로드 될 때 페이지의 렌더링 된 HTML입니다 (아약스 게시물을 할 때 업데이트되지 않습니다) : (위키 서식에 사과하지만 각 줄에 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="$('#clientListing').load('/Admin/Client/ManageClients?page=2&
amp;__=634750282355486955 #clientListing');">2</a> <a href="#"
onclick="$('#clientListing').load('/Admin/Client/ManageClients?page=3&
amp;__=634750282355506956 #clientListing');">3</a> <a href="#"
onclick="$('#clientListing').load('/Admin/Client/ManageClients?page=4&
amp;__=634750282355516957 #clientListing');">4</a> <a href="#"
onclick="$('#clientListing').load('/Admin/Client/ManageClients?page=5&
amp;__=634750282355536958 #clientListing');">5</a> <a href="#"
onclick="$('#clientListing').load('/Admin/Client/ManageClients?page=2&
amp;__=634750282355546959 #clientListing');">></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>
어떤 문제가 발생했는지에 관해서는 어떤 제안이라도 대단히 감사하겠습니다.
와우, 질문에 대한 답변이 많습니다. 문제를 해결하고 문제를 재현 할 수 있습니까? –
Heh, 내가 링크 한 마지막 질문에 대한 의견이 코드를 물어 봤기 때문에 무엇이 잘못되었을 수 있는지 알 수 있었기 때문에 모든 코드를 게시했습니다. 아마도 일부는 줄이지 만 전반적인 시나리오 자체 (다른 부분 컨트롤이있는 페이지의 다른 부분 컨트롤에서 Webgrid 부분 컨트롤을 업데이트 할 수 있음)는 내 응용 프로그램을 통해 그 곳곳에 반복 될 것입니다. 기능면에서 한번에 여러 개의 위젯을 화면에 표시해야하기 때문입니다. 그래서 독립 실행 형 웹 그리드를 작동시키는 것이 나에게 많은 도움이되지는 않습니다. – anyeone
하지만 내 목록에있는 다음은 문제를 격리 할 수 있는지 알아보기 위해 더 자세히 분석하는 것입니다. 나는이 페이지를 처음 만들었을 때 오류를 보지 못했고 서버에서 실행중인 동일한 코드에 오류가 없기 때문에 주로 좌절감을 느낍니다. – anyeone