Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
}
like image 992
Elias MP Avatar asked Jul 21 '16 10:07

Elias MP


2 Answers

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();
} 
like image 151
Elias MP Avatar answered Sep 17 '22 12:09

Elias MP


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.

like image 29
Borja Tur Avatar answered Sep 17 '22 12:09

Borja Tur