如何在其视图中刷新部分视图?

时间:2016-07-21 10:03:15

标签: c# asp.net-mvc razor asp.net-mvc-partialview

我做错了什么?这就是想法......

索引视图

<div class="col-lg-12 col-md-12 col-xs-12">
    @Html.Partial("PartialView", Model)
</div>

控制器

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

[HttpPost, ValidateInput(false)]
public ActionResult POSTPartialView(string param1)
{
    return PartialView("PartialView");
}   

PartialView有一个表格。 我第一次进入Index,PartialView可以工作,但是第二次,在POST调用之后(来自PartialView中的表单),我只能将PartialView渲染出索引。

所以要解决它,我正在做下一个:

[HttpPost, ValidateInput(false)]
public ActionResult POSTPartialView(string param1)
{
    return View("Index");
}   

有效。我再次渲染所有索引(在POST后我的更改)。但是我刷新了所有页面,所以我丢失了一些CSS Elements(例如手风琴折叠)。

我是否应该使用Ajax仅刷新内容为PartialView的div?

感谢Mates。

编辑:

@using (Html.BeginForm("PartialView", "Controller", FormMethod.Post, new { @class = "form-inline", role = "form" }))
{
    <div class="form-group col-lg-3 col-md-3 col-xs-3">
        <label for="DATA">DATA:</label>
        <input type="text" class="form-control pull-right" name="DATA">
    </div> 
    <button type="submit" class="btn btn-primary pull-right">Get Data</button>
}

3 个答案:

答案 0 :(得分:3)

好吧,我读了解决方案(Auto Refresh Partial View)。我发布它,希望澄清这个问题:

<强>的index.html

<div class="col-lg-12 col-md-12 col-xs-12" id="divPartial">
    @Html.Partial("PartialView", Model)
</div>
<script type="text/javascript">
  $("#buttonForm").click(function(e){
    $('#form').submit();
    $('#divPartial').load('/PartialController/PartialView'); 
  });
</script>

<强> PartialController

public ActionResult PartialView()
{
    // DO YOUR STUFF. 
    return PartialView("PartialView", model);
}

[HttpPost, ValidateInput(false)]
public EmptyResult POSTPartialView(string param1)
{
    // DO YOUR STUFF AFTER SUBMIT.
    return new EmptyResult();
} 

答案 1 :(得分:2)

部分视图面向在不同视图中重用代码的某些部分,但是当您提交表单时,将重新加载整个视图。

如果您不想重新加载,则必须使用AJAX提交表单。

答案 2 :(得分:1)

部分视图是为了重用不同代码的某些部分。当提交页面时,如果要避免页面刷新,则重新加载视图,您可以使用ajax。

查看代码

$.ajax({
    type: "POST",
    url: '@Url.Action("ControllerName", "ActionName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});

控制器代码

public JsonResult ActionName(string yourdata)
{
   return Json(p); \\ where p is you want to return
}