Как я могу загрузить частичное представление внутри представления

Question

Я очень смущен этим частичным представлением ...

Я хочу загрузить частичный вид внутри моего основного вида ...

вот простой пример ...

Я загружаю Index.cshtml из действия Homecontroller Index в качестве главной страницы ..

в index.cshtml Я создаю ссылку через

@Html.ActionLink("load partial view","Load","Home")

в HomeController Я добавляю новое действие под названием

public PartialViewResult Load()
{
    return PartialView("_LoadView");
}

в _LoadView.cshmtl У меня просто

<div>
    Welcome !!
</div>

НО, когда запускается проект, index.cshtml сначала рендерится и показывает мне ссылку «Загрузить частичное представление» ... когда я нажимаю на это, он переходит на новую страницу вместо рендеринга приветственного сообщения из _LoadView.cshtml в index.cshtml.

Что может быть не так?

Примечание: я не хочу загружать страницу через AJAX или не хочу использовать Ajax.ActionLink

Answer 1

Если вы хотите загрузить частичное представление непосредственно внутри основного вида, вы можете использовать помощник Html.Action:

@Html.Action("Load", "Home")

или если вы не хотите выполнять действие Load, используйте HtmlPartialhepler:

@Html.Partial("_LoadView")

Если вы хотите использовать Ajax.ActionLink, замените ваш Html.ActionLink на:

@Ajax.ActionLink(
    "load partial view", 
    "Load", 
    "Home", 
    new AjaxOptions { UpdateTargetId = "result" }
)

и, конечно, вам нужно включить на страницу владельца, гдебудет отображаться частичное:

<div id="result"></div>

Также не забудьте включить:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

на главном экране, чтобы включить Ajax.* помощников.И убедитесь, что в вашем web.config включен ненавязчивый javascript (он должен быть по умолчанию):

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

Answer 2

У меня была точно такая же проблема, как и у Лениэля.Я попробовал исправления, предложенные здесь и дюжине других мест.В конце концов, у меня получилось просто добавить

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

в мой макет ...

Answer 3

Для меня это сработало после того, как я скачал ненавязчивую библиотеку AJAX через NuGet:

 Search and install via NuGet Packages:   Microsoft.jQuery.Unobtrusive.Ajax

Чем добавить в просмотр ссылки на jquery и AJAX Ненавязчивые:

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"> </script>

Далее Ajax ActionLink и div , где мы хотим отобразить результаты:

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

<div id="toUpdate"></div>

Answer 4

Если вы делаете это с @Html.ActionLink(), то загрузка PartialView обрабатывается как обычный запрос при щелчке на элементе привязки, то есть загружать новую страницу с ответом метода PartialViewResult.
Если вы хотите загрузить его немедленно, тогда вы используете @Html.RenderPartial("_LoadView") или @Html.RenderAction("Load").
Если вы хотите сделать это при взаимодействии с пользователем (то есть, нажав на ссылку), тогда вам нужно использовать AJAX -> @Ajax.ActionLink()

Answer 5

, если вы хотите заполнить содержимое вашего частичного представления внутри вашего представления, вы можете использовать

@Html.Partial("PartialViewName")

или

{@Html.RenderPartial("PartialViewName");}

если вы хотите сделать запрос к серверу и обработать данные, а затем вернуть частичное представление в основное представление, заполненное этими данными, которые вы можете использовать

...
    @Html.Action("Load", "Home")
...

public PartialViewResult Load()
{
    return PartialView("_LoadView");
}

если вы хотите, чтобы пользователь щелкнул ссылку и затем заполнил данные частичного просмотра, которые вы можете использовать:

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    "ControlerName",
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

Answer 6

RenderParital лучше использовать для производительности.

{@Html.RenderPartial("_LoadView");}

Answer 7

Небольшой твик к вышесказанному

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    "ControlerName",
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

<div id="toUpdate"></div>