0

I have ASP.net-mvc5 website. I need to allow user update/ edit two emergency contact details. To achieve that I am sending "list myModel" to razor view and in view I got two @html.beginform. I have List because I know I always have two record. I am printing value from list via index 0 for record 1 and 1 for record 2. Jquery Ajax function used to post data back to controller.

Now form 1 for emergency contact detail 1 is working fine but form 2 for 2nd emergency contact detail posting null values to controller. I have commet form1 and tried to submit form2 but still null values. I am not sure why this happening.

Controller

  [Authorize]
    [HttpGet]
    public ActionResult EditEmergencyContact()
    {

        int _studentEntityID = 0;

        _studentEntityID = _studentProfileServices.GetStudentIDByIdentityUserID(User.Identity.GetUserId());

        List<EmergencyContact> _emergencyContactModel = new List<EmergencyContact>();

        _emergencyContactModel = _studentProfileServices.GetEmergencyContactByStudentID(_studentEntityID);

        return PartialView("EditEmergencyContact_Partial", _emergencyContactModel);

    }

    [Authorize]
    [HttpPost]
    public ActionResult EditEmergencyContact(List<EmergencyContact> _emergencyContactModel)
    {
       try
        {
            if (_emergencyContactModel!=null && _emergencyContactModel.Count()>0)
            {
                if (ModelState.IsValid)
                {


                    int _entityID = _studentProfileServices.EditEmergencyContactByStudentID(
                        new EmergencyContact
                        {
                            EmergencyContactID = _emergencyContactModel[0].EmergencyContactID,
                            StudentID = _emergencyContactModel[0].StudentID,
                            NameOfContact = _emergencyContactModel[0].NameOfContact,
                            Relationship = _emergencyContactModel[0].Relationship,
                            Telephone = _emergencyContactModel[0].Telephone,
                            Mobile = _emergencyContactModel[0].Mobile,
                            Address = _emergencyContactModel[0].Address
                        });

                    if (_entityID != 0)
                    {
                        return Json(new { Response = "Success" });
                    }
                    else
                    {
                        return Json(new { Response = "Error" });
                    }
                }
                else
                {
                    return Json(new { Response = "Invalid Entry" });
                }
            }
            else
            {
                  return Json(new { Response = "Error! In Updating Record" });
            }
        }
        catch (DataException ex)
        {
            ModelState.AddModelError("", "Unable To Edit Emergency Contact" + ex);
        }

        return RedirectToAction("MyProfile", "StudentProfile");
    }

View

@using (Html.BeginForm("EditEmergencyContact", "StudentProfile", FormMethod.Post, new { id = "EditNo2EmergencyContactForm" }))
{
  @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Emergency Contact 2</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model[1].EmergencyContactID)

    <div class="form-group">
        @Html.LabelFor(model => model[1].StudentID, "StudentID", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].StudentID, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].StudentID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model[1].NameOfContact, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].NameOfContact, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].NameOfContact, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model[1].Relationship, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].Relationship, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].Relationship, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model[1].Telephone, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].Telephone, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].Telephone, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model[1].Mobile, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].Mobile, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].Mobile, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model[1].Address, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].Address, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].Address, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
 </div>
}

Jquery Function

 $('#EditNo2EmergencyContactForm').submit(function (e) {

    e.preventDefault();

    var formURL = $(this).attr("action");

    alert($(this).serialize());

    $.ajax({
        url: formURL,
        type: "POST",
        data: $(this).serialize()
    }).done(function (data, textStatus, jqXHR) {

        if (data.Response == "Success") {

            $(this).MyMessageDialog({
                _messageBlockID: "_StatusMessage",
                _messageContent: "Record Been Updated Successfully",
                _messageBlockWidth: "300px"
            });

            $('div#_StatusMessage').on('dialogclose', function (event) {
                window.location = "/StudentProfile/MyProfile";
            });
        }
        else {

            $(this).MyMessageDialog({
                _messageBlockID: "_StatusMessage",
                _messageContent: "<div class='errorMessage'>" + data.Response + "</div>",
                _messageBlockWidth: "300px"
            });
        }
    }).fail(function (jqXHR, textStatus, errorThrown) {
        $(this).MyMessageDialog({
            _messageBlockID: "_StatusMessage",
            _messageContent: "<div class='errorMessage'> Error In Updating Record! " + textStatus + "  " + errorThrown + "  "+jqXHR.status +"</div>",
            _messageBlockWidth: "350px"
        });

        $('div#_StatusMessage').on('dialogclose', function (event) {
            window.location = "/StudentProfile/MyProfile";
        });
    });
});

For Form 1: this one works

 @using (Html.BeginForm("EditEmergencyContact", "StudentProfile", FormMethod.Post, new { id = "EditNo1EmergencyContactForm" }))

..............

 $('#EditNo1EmergencyContactForm').submit(function (e) {
Improve this question
7
  • 1
    Why do you need two forms? Use a for loop in the same form for both contacts. Then you post back the form the list will contain both the contacts Commented Jul 15, 2015 at 12:35
  • because I am require to allow user to view and or update one or both record Commented Jul 15, 2015 at 12:37
  • the logic works fine for record 1 model=>model[0].NameOfContact but send null to controller for record 2 model=>model[1].NameOfContact Commented Jul 15, 2015 at 12:39
  • I get null as for whole list, not null values for each variable Commented Jul 15, 2015 at 12:40
  • I am not 100% sure about this, but I don't think the MVC Model binder will bind the items from list[1] to the List<EmergencyContact> _emergencyContactModel in controller without the items[0]. You are only posting back the items from [1] index and not the ones from [0] index when u update the Emergency contact 2 Commented Jul 15, 2015 at 12:44

1 Answer 1

Reset to default
2

You are using same controller post action for different forms. Your action update model (list of entities) only entity present on first position. Your models has a list of [entity0, entity1] but in form view you remove entity0 because you are binding only one entity1 from model having list.

Here you have 2 approaches:

Make post controller action more generic

    public ActionResult EditEmergencyContact (List<EmergencyContact> _emergencyContactModel)
            {

                try
                {

                    if (_emergencyContactModel != null && _emergencyContactModel.Count() > 0)

                    {
                        if (ModelState.IsValid)
                        {
                            bool validation = true;

                            for (int i = 1; i < _emergencyContactModel.Count(); i++)
                            {

                                if (_emergencyContactModel[i].EmergencyContactID != null)
                                {

                                    int _entityID = _studentProfileServices.EditEmergencyContactByStudentID(

                                    new EmergencyContact
                                    {
                                        EmergencyContactID = _emergencyContactModel[i].EmergencyContactID,
                                        StudentID = _emergencyContactModel[i].StudentID,
                                        NameOfContact = _emergencyContactModel[i].NameOfContact,
                                        Relationship = _emergencyContactModel[i].Relationship,
                                        Telephone = _emergencyContactModel[i].Telephone,
                                        Mobile = _emergencyContactModel[i].Mobile,
                                        Address = _emergencyContactModel[i].Address
                                    });

                                    if (_entityID == 0)
                                    {
                                        validation = false;
                                        break;
                                    }
                                }
                            }

                            if (validation)
                            {
                                return Json(new { Response = "Success" });
                            }
                            else
                            {
                                return Json(new { Response = "Error" });
                            }
                        }
                        else
                        {
                            return Json(new { Response = "Invalid Entry" });
                        }
                    }
                    else
                    {
                        return Json(new { Response = "Error! In Updating Record" });
                    }
                }
                catch (DataException ex)
                {
                    ModelState.AddModelError("", "Unable To Edit Emergency Contact" + ex);
                }

                return RedirectToAction("MyProfile", "StudentProfile");
            }

Option 2, do not pass model empty entities to controller, hide inside the form the values:

@using (Html.BeginForm("EditEmergencyContact", "StudentProfile", FormMethod.Post, new { id = "EditNo2EmergencyContactForm" }))
{
  @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Emergency Contact 2</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @* here you pas List 0  model recieved value and viceversa if you edit model[0]*@
    @Html.HiddenFor(model => model[0].EmergencyContactID)
    @Html.HiddenFor(model => model[0].StudentID)
    @Html.HiddenFor(model => model[0].NameOfContact)
    @Html.HiddenFor(model => model[0].Relationship)
    @Html.HiddenFor(model => model[0].Telephone)
    @Html.HiddenFor(model => model[0].Mobile)
    @Html.HiddenFor(model => model[0].Address)
    @Html.HiddenFor(model => model[0].Address)

    @Html.HiddenFor(model => model[1].EmergencyContactID)

    <div class="form-group">
        @Html.LabelFor(model => model[1].StudentID, "StudentID", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].StudentID, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].StudentID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model[1].NameOfContact, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].NameOfContact, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].NameOfContact, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model[1].Relationship, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].Relationship, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].Relationship, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model[1].Telephone, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].Telephone, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].Telephone, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model[1].Mobile, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].Mobile, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].Mobile, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model[1].Address, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model[1].Address, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model[1].Address, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
 </div>
}

the controller where you update both entities from list :

int _entityID_0 = _studentProfileServices.EditEmergencyContactByStudentID(
new EmergencyContact
{
    EmergencyContactID = _emergencyContactModel[0].EmergencyContactID,
    StudentID = _emergencyContactModel[0].StudentID,
    NameOfContact = _emergencyContactModel[0].NameOfContact,
    Relationship = _emergencyContactModel[0].Relationship,
    Telephone = _emergencyContactModel[0].Telephone,
    Mobile = _emergencyContactModel[0].Mobile,
    Address = _emergencyContactModel[0].Address
});

int _entityID_1 = _studentProfileServices.EditEmergencyContactByStudentID(
new EmergencyContact
{
    EmergencyContactID = _emergencyContactModel[1].EmergencyContactID,
    StudentID = _emergencyContactModel[1].StudentID,
    NameOfContact = _emergencyContactModel[1].NameOfContact,
    Relationship = _emergencyContactModel[1].Relationship,
    Telephone = _emergencyContactModel[1].Telephone,
    Mobile = _emergencyContactModel[1].Mobile,
    Address = _emergencyContactModel[1].Address
});

if (_entityID_0 != 0 && _entityID_1 != 0)
{
    return Json(new { Response = "Success" });
}
else
{
    return Json(new { Response = "Error" });
}

Your approach is very bad, you should update address one by one not a complex list of address.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

many thanks... you was right about the model[0]. and model[1]. index; binding.... I have another thought.... can I take values from form using javaScipt or jQuery and assign to my strongly typed model ???
Use $('form').serializeArray() and you can parse that array, or you can use an ajax post of ($('form').serialize()) witch return your model transformed into json, check newtonsoft json

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.