使用AJAX在视图内渲染局部视图

时间:2013-04-12 14:44:37

标签: c# html ajax asp.net-mvc

我正在尝试在提交表单时刷新视图内部的部分视图。但是,每当我尝试它时,只需将局部视图渲染为普通视图。有人能告诉我我做错了吗?

控制器:

public ActionResult ChangeHeatName(string heatName, string updatedHeat)
    {
        string user = User.Identity.Name;
        HomeModel H = new HomeModel();
        H.ChangeHeatName(heatName, updatedHeat, user);
        ChemViewModel mySlagViewModel = new ChemViewModel();
        mySlagViewModel = H.QueryResults(heatName);

        return PartialView("PartialChemAnalysis", mySlagViewModel);
    }

部分视图表单(包含在局部视图中,不包含在主视图中):

@using (Ajax.BeginForm("ChangeHeatName", "Home", new AjaxOptions(){UpdateTargetId = "chemDiv" InsertionMode = InsertionMode.Replace}))
{
    <section>
        Heat Name:<input type="text" name="heatName" value="@Html.ValueFor(x => x.heatname)" style ="width:100px"/>
        Change to:<input type="text" name="updatedHeat" value="" style="width: 100px" />
        <input type="submit" name="ChangeHeatName" value="Change" />
    </section>
}

呈现部分视图的索引视图:

@if(ViewBag.SearchKey == null)
{
    <div class="content-wrapper">
        <hgroup class="title">
            <h1>@HttpContext.Current.User.Identity.Name</h1>
            <h2>@ViewBag.Message</h2>
        </hgroup>
    </div>
}

@using (Html.BeginForm("Index", "Home", "POST"))
{
<div class="searchField">
   <input type="text" class="search-query" name="heatSearch" placeholder="Search">
        <button class="btn btn-success"  type="submit">Search</button>
    <br />
    @if (ViewBag.AverageSuccessful == true)
    {
        <input type="text" name="AvgConfirmation" class="search-query" value="Average Submitted Successfully" width:"400px" placeholder="Search" />
    }
</div>
}

@if(ViewBag.SearchKey != null)
{
    <div>
    <div id ="chemDiv">
    @Html.Action("PartialChemAnalysis", "Home", (string)ViewBag.SearchKey)
    </div>

    <div id ="slafDiv">
    @Html.Action("PartialSlagView", "Home", (string)ViewBag.SearchKey)
    </div>
    </div>

 }

传递SearchKey的索引控制器:

 [HttpPost]
    public ActionResult Index(string heatSearch)
    {
        ViewBag.SearchKey = heatSearch;

        return View();
    }

3 个答案:

答案 0 :(得分:1)

目前你的ajax.beginform在你的局部视图中,这一切都很好,但是你的部分视图没有在你的索引中呈现,所以真的你永远不会做ajax替换逻辑你只是调用一个动作方法并获得部分视图的整页刷新。

这是可行的。

@if(ViewBag.SearchKey != null)
{
    <div>
        <div id ="chemDiv">
            @Html.Partial("ChangeHeatName")
        </div>

        <div id ="slafDiv">
            @Html.Action("PartialSlagView", "Home", (string)ViewBag.SearchKey)
        </div>
    </div>
}

现在,您的Ajax.Beginform将在索引视图中呈现,当单击该按钮时,它将刷新。

编辑:您需要对@Html.Action("PartialChemAnalysis", "Home", (string)ViewBag.SearchKey)执行某些操作,可能会将其粘贴在您的局部视图中,因为“chemDiv”中的所有内容现在都会在更新后被替换。

答案 1 :(得分:1)

您未在POST中指定Ajax.BeginForm()。试试这个:

@using (Ajax.BeginForm("ChangeHeatName", "Home", FormMethod.Post, 
new AjaxOptions(){UpdateTargetId = "chemDiv" InsertionMode = InsertionMode.Replace}))
{...}

另外,在控制器操作上粘贴一个断点并逐步执行它,查看它是否实际上正在点击return PartialView()或跳过它。

答案 2 :(得分:0)

发布此信息是因为它不是一个直观的修复方法。显然,MVC 4和jQuery 1.9.1存在问题,所以为了实现这一点,我不得不改变对jQuery 1.7.1的引用