Currently I have a main view that contains a KendoGrid. Based on a button the user clicks, we see the context and display a partial view according to the row clicked (The row could be of phone, address or electronic type). I am loading the partial view via an AJAX call like mentioned in this answer (Render Partial View Using jQuery in ASP.NET MVC).
The following is the javascript to load the form :
function LoadEditPage(x) {
var grid = $("#contactGrid").data("kendoGrid");
var Id = grid.dataItem(x.parent().parent()).ContactId;
var Type = grid.dataItem(x.parent().parent()).ContactType;
$.get("ShowEditForm", { Id: Id, Type: Type }, function(data) {
$("#EditForm").html(data);
});
}
The following is the action that handles the request for partial View :
public ActionResult ShowEditForm(int Id, string Type)
{
var clientChannel = new ClientChannel<IContactManger>("clientEndPoint1");
var getContactByPartyIdResponse = clientChannel.Channel.GetContactByPartyID(1);
switch (Type)
{
case "Address" :
var address = getContactByPartyIdResponse.Contact.AddressDto.FirstOrDefault(x => x.ContactId == Id);
return PartialView("_Address", address);
break;
case "Telephone" :
var telephone = getContactByPartyIdResponse.Contact.PhoneDto.FirstOrDefault(x => x.CNTCT_ID == Id);
return PartialView("_Telephone", telephone);
break;
case "Electronic" :
var electronic = getContactByPartyIdResponse.Contact.ElectronicDto.FirstOrDefault(x => x.CNTCT_ID == Id);
return PartialView("_Electronic", electronic);
break;
}
return null;
}
address
, telephone
and electronic
are three different types of classes and are passed to three separate partial views.
The following is an example of a partial view called _Telephone:
@model KY.COT.DS.Common.CManager.Services.DataContracts.DTO.Telephone
@using (Html.BeginForm())
{
<div>
@Html.LabelFor(m => m.AREA_CD)
@Html.TextBoxFor(m => m.AREA_CD)
@Html.ValidationMessageFor(m => m.AREA_CD)
</div>
<div>
@Html.LabelFor(m => m.LN_NMBR)
@Html.TextBoxFor(m => m.LN_NMBR)
@Html.ValidationMessageFor(m => m.LN_NMBR)
</div>
<div>
@Html.LabelFor(m => m.EXTNSN)
@Html.TextBoxFor(m => m.EXTNSN)
@Html.ValidationMessageFor(m => m.EXTNSN)
</div>
<input type="submit" value="Submit"/>
}
The problem I have is that when we make edits to the form and submit it, I don't know how I should set it up such that the form returns with appropriate validation messages without making changes to the main page we currently are on. I only want the partial view to update, while keeping the main view the same.
I have seen this question a couple of more places, but they have no answers. I would really appreciate it if someone could shed some light on this problem or if there are alternate strategies. Thanks in advance!