Refresh DIV using partial view in MVC5 - asp.net-mvc

Question

I am trying to refresh a div based on the dropdown selection. I have a main view which uses a partial view (_Module). The main view has a dropdown; upon selecting the dropdown I am trying to change the content in the partial view which in turn would be reflected on the main view.
The main view:
#model Test.Models.CreateDirectoryModel
#{
ViewBag.Title = "CreateAdmin";
}
#using (Html.BeginForm("CreateAdmin", "RDBWeb", FormMethod.Post))
{
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ProductType").change(function () {
var catType = $(this).val();
$("#result").load('#(Url.Action("GetPPOFlag", "RDBWeb", null, Request.Url.Scheme))?catType=' + catType);
});
});
</script>
#Html.ValidationSummary(true)
<div class="form-horizontal">
<h4>Create a New Directory</h4>
<hr />
<div class="form-group">
#Html.LabelFor(model => model.DirectoryNumber, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DirectoryNumber)
#Html.ValidationMessageFor(model => model.DirectoryNumber)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ProductType, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.ProductType, new SelectList(Model.ProductType), "Select Product")
#Html.ValidationMessageFor(model => model.ProductType)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DirectoryName, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DirectoryName)
#Html.ValidationMessageFor(model => model.DirectoryName)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.AdminName, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.AdminName, ViewBag.Drop as SelectList, "Select Admin")
#Html.ValidationMessageFor(model => model.AdminName)
</div>
</div>
<div id="result">
#if(Model.Module != null)
{
{Html.RenderPartial("_Module", Model.Module);}
}
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
<div>
</div>
</div>
}
The partial view is:
#model Test.Models.CreateDirectoryModel
#foreach (string s in Model.Module)
{
#Html.LabelFor(a => s.ToString());
}
The methods relevant for these in the controller are:
public ActionResult GetPPOFlag(string catType)
{
ProdTypeModel p1 = new ProdTypeModel();
int flag = p1.GetPPOFlag(catType);
return RedirectToAction("GetModule", new { flag = flag });
}
[HttpGet]
public ActionResult GetModule(int flag)
{
ModuleType m1 = new ModuleType();
List<string> moduleList= m1.GetModules(flag);
return PartialView("_Module", moduleList);
}
My problem is that by default the Partial view object is null initially as the dropdown value is yet to be chosen. I added a check to render the partial view only if the object is not null; but that does not load the new values into the partial view. All I see is that the GetModule method is invoked and the partial view method is called as well, but there is no change in the div on the main page nor the partial view.

Answer 1

try to do like this, just keep an empty div inside in the main view like this
<div id="result">
</div>
On dropdown selection change, give a ajax call and get partial view and render html in the div
$('#result').empty();
$("#result").html(data);