CODEWITHSUNDEEP
c#asp.net-mvcrazorasp.net-mvc-partialview
Kenzo_Gilead
Kenzo_Gilead

Reputation: 2439

How can I refresh just a Partial View in its View?

What Am I doing wrong guys? This is the idea...

Index view

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

Controller

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

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

PartialView has a Form. The first time I enter in Index, PartialView works, but the second time, after a POST call (coming from the form inside of PartialView), I only got to render the PartialView out of the Index.

So to fix it, I´m doing the next:

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

That works. I render all Index again (with my changes, after POST). But I refresh all page so I lost a few CSS Elements (accordion discollapsed for example).

Should I use Ajax for refreshing only the div which contents PartialView?

Thanks Mates.

EDITED:

@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>
}

Upvotes: 18

Views: 75351

Answers (3)

Kenzo_Gilead
Kenzo_Gilead

Reputation: 2439

Well, I read the solution (Auto Refresh Partial View). I am posting it, hoping clarify the question:

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();
}

Upvotes: 24

Pushpendra Maheshwari
Pushpendra Maheshwari

Reputation: 39

Partial view is for reuse some parts of the code in different. When a page is submit then view is reload if you want to avoid page refreshing, you can use ajax.

Code for View

$.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'); }
});

Code for Controller

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

Upvotes: 1

Borja Tur
Borja Tur

Reputation: 817

Partial view is oriented to reuse some parts of the code in differents views but when you submit a form, the entire view is reloaded.

If you dont want to reload yo have to use AJAX for submit the form.

Upvotes: 3

Related Questions