0

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!

Community
  • 1
  • 1
thispatchofsky
  • 854
  • 6
  • 15

0 Answers0