Question

我的控制器操作是：

        public ActionResult PVInPage()
        {
            return View();
        }

        public ActionResult ViewPage2()
        {
            return PartialView();
        }

我的主要观点：

@using (Html.BeginForm("ViewPage2", "PartialViewInPage"))
{    
    <input type="submit" value="Call Page Two" />  
}

<div id="DisplayPartilView">

        @*display partial view *@

</div>

我的部分观点是：

  @{
        ViewBag.Title = "View Page 2";
    }

    <div style="width:500px; height:200px; background-color:Gray" >


     <h1> This is my Partial view </h1>

    </div>

现在我想这样做：当我在主视图中点击提交按钮时，我的部分视图出现在

中

我的主视图内部div，id =“DisplayPartilView”。谢谢你的回复

Answer 1

如果要将数据/ html加载到页面而不导航到其他页面，则需要使用Ajax。

ASP.Net MVC提供了一组使用Ajax的帮助程序（它们都在引擎盖下使用jQuery.Ajax，因此您可以随时回退到一个级别并手动编写ajax调用）。

但在你的情况下，Ajax.BeginForm提供了你需要的一切：

因此，请将主视图更改为：

@using (Ajax.BeginForm("ViewPage2", "PartialViewInPage", 
        new AjaxOptions() { UpdateTargetId = "DisplayPartilView" }))
{    
    <input type="submit" value="Call Page Two" />  
}

<div id="DisplayPartilView">

        @*display partial view *@

</div>

要使其工作，您需要在jQuery之后在主视图或布局文件中引用以下脚本：

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

Answer 2

@using (Html.BeginForm("ViewPage2", "PartialViewInPage"))

会刷新页面，这就是您需要ajax

的原因

.serialize()从所有输入中获取数据，.ajax()发出post请求，然后设置部分：

$('#DisplayPartilView').html(response);

Answer 3

在我的项目中，我正在这样做，它在下面

这是我的按钮，我点击然后我的div中的部分视图加载像这样

<script type="text/javascript">
    $(function () {
        $("#btnLode").click(function () {
            $("#LodeForm").load("/City/ShowAllState", function () {
                alert("Your page loaded Successfully !!!!!!!");
            });
        });
    });

</script>

<div id="LodeForm">
</div>

这是此问题的另一种解决方案

@using (Ajax.BeginForm("SearchCountry", "City",
    new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "Get",
        LoadingElementId = "ajax-loader",
        UpdateTargetId = "CountryListID",
    }))
{

    <input type="submit" value="search Country" data-autocomplete-source="@Url.Action("SearchCountry", "City")" />        
}
<div id="CountryListID">
</div>

我认为这会对你有所帮助

MVC3 Razor视图引擎中具有目标div的局部视图显示

3 个答案: