Partial view with Ajax.Beginform to submit.

Question

Hi,

        In our MVC application we are using bootstrap components. Using them we have designed a main view with multiple div's which gets slide on click of their corresponding buttons using LiquidSlider.bootstrap plugin.

Now in that each div we are rendering partial views .Each Partial view using @ajax.Beginform  to submit back .The problem is after submitting my partial view is not getting refreshed, and I am not able to call Onsuccess javascript function ,It is not at all getting triggered.

 

Don't know whether our approach is correct or not. Please help me in finding out a way to accomplish this task

 

My main view is

 

<div class="container">

<div class="liquid-slider" id="main-slider">

<div>

<div class="user_icon_div">

</div>

<h2 class="title" style="display: none">

Users</h2>

<div class="slide_content">

<div class="slider_header">

<div class="slider_header_txt">

Users</div>

<div class="slider_search">

<div>

User</div>

<div>

<input type="text" />

<button class="md-trigger" data-modal="modal-1">

UserSearch</button></div>

</div>

</div>

<div id="divUser" class="slide_content_body">

@{Html.RenderAction("UserPartial");}

</div>

</div>

</div>

<div>

<div class="sec_icon_div">

</div>

<h2 class="title" style="display: none">

Security</h2>

@{Html.RenderAction("security");}

</div>

 

My Partial view is

 

<script type="text/javascript">

function getMsg() {

alert("hi");

$("#lblMsg").Text("Created User Successfully");

}

//jQuery(function ($) { $('.datepicker').datepicker(); });

</script>

@using (Ajax.BeginForm("UserPartial", "Admin", new AjaxOptions

{

InsertionMode = InsertionMode.Replace,

HttpMethod = "POST",

}, new { @id = "updateuserform", OnSuccess = "getMsg()" }))

{

<div class="section_div1">

<div id="teamDummy" style="display: none;">

</div>

<div class="field_div">

<div class="field_name">

Family Name:</div>

<div class="field_input">

@Html.TextBoxFor(model => model.FirstName)

@Html.ValidationMessageFor(model => model.FirstName)

</div>

</div>

<div class="field_div">

<div class="field_name">

Given Name:</div>

<div class="field_input">

@Html.TextBoxFor(model => model.LastName)

@Html.ValidationMessageFor(model => model.LastName)</div>

</div>

<div class="field_div">

<div class="field_name">

MI:</div>

<div class="field_input">

@Html.TextBoxFor(model => model.MI)

@Html.ValidationMessageFor(model => model.MI)</div>

</div>

<div class="field_div">

<div class="field_name">

DOB:</div>

<div class="field_input">

<input type="text" id="DOB" name="DOB" data-provide="datepicker" class ="datepicker"/>

@*@Html.TextBoxFor(model => model.DOB)*@</div>

</div>

<div class="field_div">

<div class="field_name">

Gender:</div>

<div class="field_input">

@{

List<SelectListItem> Gender = new List<SelectListItem>();

Gender.Add(new SelectListItem { Text = "Male", Value = "1" });

Gender.Add(new SelectListItem { Text = "Female", Value = "2" });

}

@Html.DropDownListFor(model => model.Gender, Gender, "-- Select --", new Dictionary<string, object> { { "class", "dropdown" }, { "data-settings", "{\"wrapperClass\":\"flat\"}" } })

</div>

</div>

<div class="field_div">

<div class="field_name">

Marital Status:</div>

<div class="field_input">

@{ List<SelectListItem> MaritalStatus = new List<SelectListItem>();

MaritalStatus.Add(new SelectListItem { Text = "Single", Value = "1" });

MaritalStatus.Add(new SelectListItem { Text = "Married", Value = "2" });

}

@Html.DropDownListFor(model => model.MaritalStatus, MaritalStatus, "-- Select --", new Dictionary<string, object> { { "class", "dropdown" }, { "data-settings", "{\"wrapperClass\":\"flat\"}" } })

</div>

</div>

<div class="field_div">

<div class="field_name">

Degree:</div>

<div class="field_input">

@Html.TextBoxFor(model => model.Degree)

@Html.ValidationMessageFor(model => model.Degree)</div>

</div>

<div class="field_div">

<div class="field_name">

License:</div>

<div class="field_input">

@Html.TextBoxFor(model => model.License)

@Html.ValidationMessageFor(model => model.License)</div>

</div>

...

<div class="field_name">

Email:</div>

<div class="field_input">

@Html.TextBoxFor(model => model.EmailID)

@Html.ValidationMessageFor(model => model.EmailID)</div>

</div>

<div class="field_div">

<div class="field_name">

Fax:</div>

<div class="field_input">

@Html.TextBoxFor(model => model.Fax)

@Html.ValidationMessageFor(model => model.Fax)</div>

</div>

</div>

<div class="field_div" align="right">

<input type="submit" name="btnSubmit" value="Save User" class="btn btn-success" />

<input type="button" name="btnNewUser" value="New User" class="btn btn-info" />

</div>

<div class="alert alert-success" role="alert">

<label id="lblmsg" class="col-lg-2 control-label"></label></div>

}

 

my child controller post action is:

 

/* for ajax submission of user form*/

[HttpPost]

public ActionResult UserPartial([Bind(Exclude = "Password,Level,PracticeName,HealthAuthorityGp,PctGP,ProviderId")]UserBaseView objuser)

{

if (ModelState.IsValid)

{

try

{

UserBaseViewHelper objHelper = new UserBaseViewHelper();

objHelper.SaveUserDetails(objuser);

objuser.GetLevels = objHelper.GetUserLevels();

}

catch (Exception ex)

{

ModelState.AddModelError("Unable to create new user", ex);

}

ModelState.Clear();

objuser = new UserBaseView();

return PartialView(objuser);

}

else

{

ModelState.AddModelError("", "Unable to create new user");

return PartialView(objuser);

}

}

 

 

I am calling "jquery.validate.unobtrusive.ajax.js" too but could not call the javascript function onsuccess