Почему мой партиал рендерится 2 раза в MVC?
У меня есть партиал, который изначально отображается при первой загрузке страницы. И затем, когда я нажимаю на nav-tab, он создает другой набор partial внутри моего представления. Он должен обновить тот же партиал, не создавая его нового набора.
Контроллер
public ActionResult Index()
{
ClsHome model = new ClsHome();
return View(model);
}
public PartialViewResult EmployeeBasedCountry(int CountryId)
{
ClsHome clshome = new ClsHome();
clshome.Country = CountryId;
clshome.countries = CountryFilter(CountryId);
return PartialView("~/Views/Home/_pEmp.cshtml", clshome);
}
Вид
@model EmpWebsite.Models.Home.ClsHome
<div id=Partial class = "col-md-5">
@Html.Partial("_pEmp")
</div>
Частичное
@model EmpWebsite.Models.Home.ClsHome
<ul class = "nav nav-tabs nav-justified">
<li class = "active">@Html.ActionLink("Australia", "EmployeeBasedCountry", "Home", new @CountryId = "1" },new{@class = "ActionLinkId"})
</li>
<li>@Html.ActionLink("New Zealand", "EmployeeBasedCountry", "Home", new {@CountryId = "2" },new{@class = "ActionLinkId"})</li>
</ul>
<div class = "tab-content">
<div class = "panel">
<table class = "table-striped">
<tr class = "heading">
<th>
EmpId
</th>
<th>
EmpName
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@item.EmpId
</td>
<td>
<a>@item.EmpName</a>
</td>
</tr>
}
</table>
</div>
</div>
Сценарий
$(document).on("click", '.ActionLinkId', function (e) {
e.preventDefault();
$.ajax({
url: $(this).attr("href"),
type: "GET",
}).done(function (partialViewResult) {
debugger;
$("#Partial").html(partialViewResult);
});
});
Для идентификатора Div в вашем представлении нужны кавычки
@CoskunOzogul, да проверял. Других div с id Partial не существует.
@ Джеймс, я тоже пробовал. Не повезло.
Попробуйте поставить $('#Partial').children().remove(); перед $("#Partial").html(partialViewResult);. Это удаляет все предыдущие дочерние элементы из частичного div, а затем отображает результат AJAX.
@TetsuyaYamamoto, я тоже попробовал ваш код. Но все же он генерирует 2 частичные.
@TetsuyaYamamoto, $('#Partial').children().remove(); у меня сейчас работал. Теперь не могли бы вы направить меня, даже если я нажимаю на New Zealand из nav-tab, он все еще показывает Australia во внешнем интерфейсе.
Если вы хотите обработать щелчок по вкладке li, обработайте событие щелчка $('.nav li') и используйте $('.nav li').not(this).removeClass('active') и добавьте $(this).addClass('active'). А что касается вашего ActionLink, используйте Ajax.ActionLink с InsertionMode.Replace: @Ajax.ActionLink("New Zealand", "EmployeeBasedCountry", "Home", new { @CountryId = "2" }, new AjaxOptions { UpdateTargetId = "Partial", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, new { @class = "ActionLinkId" }).
@TetsuyaYamamoto, я сделал $('.nav li').click(function () { $('.nav li').not(this).removeClass('active'); $(this).addClass('active'); });, но все еще не работает. Он изменился на секунду, затем снова стал Australia.
Ваш код выглядит нормально. Я думаю, вы не получаете правильный html от вашего контроллера, напишите console.info(partialViewResult) перед обновлением HTML и проверьте на вкладке консоли, получаете ли вы правильный html или нет.
Ответы 2
Причина в этом случае должна возвращать представление вместо частичного представления. В вашем случае представление будет содержать код макета.
Попробуйте добавить новое представление и отметьте его как частичное представление, скопируйте свой код в это представление, оно должно работать.
Я почти уверен, что возвращаю частичное представление из контроллера, и оно также выполняется в основном представлении.
Конечно, в частичном контроллере вы возвращаете частичное представление. Однажды я забыл проверить «PartialView» на моем представлении в момент добавления в мой проект. Вот почему я считаю, что это должно быть мнение. В вашем коде я не заметил аномалий.
Тот факт, что у вас есть class=col-md-5, означает, что это не все вашего HTML в представлении.
Хотя полезно предоставить сокращенный фрагмент, это может быть причиной получения «двух содержимого» при перезагрузке через ajax, особенно если у вас есть модальное диалоговое окно начальной загрузки или подобное. Предлагаю в первом случае сократить html до минимума.
Причина, по которой ваши вкладки не обновляются, заключается в том, что вы заменяете слишком много. Вы включаете вкладки в свой PartialView, поэтому они перезаписываются при их замене. Итак, что происходит:
- начальный рендер
- нажмите на
li- бутстрап выберет его (чтобы вы его увидели на мгновение) - ваш код ajax GET запускается
liперезаписывается вашим жестко запрограммированнымli class=active(поэтому выполняется сброс обратно)
Ключ состоит в том, чтобы переместить навигацию к содержимому за пределами, то есть:
Вид: @model EmpWebsite.Models.Home.ClsHome
<ul class = "nav nav-tabs nav-justified">
<li class = "active">@Html.ActionLink("Australia", "EmployeeBasedCountry", "Home", new CountryId = "1" }, new { @class = "ActionLinkId" })
</li>
<li>@Html.ActionLink("New Zealand", "EmployeeBasedCountry", "Home", new { CountryId = "2" }, new { @class = "ActionLinkId"})</li>
</ul>
<div class='col-md-5'>
<div class = "tab-content">
<div class = "panel">
<div id = "Partial">
@Html.Partial("_pEmp")
</div>
</div>
</div>
</div>
Частичное
@model EmpWebsite.Models.Home.ClsHome
<table class = "table-striped">
...
тогда ваша "навигация" остается на странице и не перезагружается / не сбрасывается каждый раз.
Альтернативой этому было бы установить «активный» только на правильном li, но это становится беспорядочным и смешивает разделение задач (частичное должно быть связано только с отображением контента, а не с навигацией).
Я следил за вашим ответом, но теперь часть не отображается на странице.
Разве я не могу использовать такой <li class = "active"><a data-toggle = "tab" href = "NZTab">
Возможно, вам придется переехать туда, где находится col-md-5 - я обновил код, чтобы вернуть его туда, где он был
Я переместил id = "Partial" на <div id = "Partial" class='col-md-5'>, но все еще не работает. Я думаю, что код <ul> под основным видом вызывает проблему.
Вы проверяли, нет ли другого div с частичным идентификатором?