Reset model values for partial view

Question

I have a view which contains two partial views. One to select a customer and one to create a new customer both shown within tabs on the parent page. If somebody selects a customer, and then continues with the data entry form, but then has to go back to create a new customer instead, then the data from the selected customer remains. I can replace the data by entering the new data, however, the important bit is that the customer id remains and therefore none of the other data is taken into account. Is there a way for me to reset the customer object on click of e.g. an edit button without losing data from the rest of the page?

My parent view (relevant section) is:

    <div class="form-group">
        @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-12">
            @if (Model.CommunicationModel.Communication.Customer.Name == null)
            {
                <input id="btnCust" type="button" value="Select" class="btn btn-default selectCustomer" />
            }
            else
            {
                <span id="custSpan" style="font-size:16px; font:bold;">
                    @Html.DisplayFor(model => model.CommunicationModel.Communication.Customer.Name)
                    @Html.HiddenFor(model => model.CommunicationModel.Communication.Customer.CustomerId)
                    <input id="btnEditCust" type="button" value="Edit" class="btn btn-default selectCustomer" />
                </span>
            }
            <div id="customerTabs" style="display:none;">
                <hr />
                <p>
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#tabs-1" aria-controls="tabs-1" role="tab" data-toggle="tab">Select Customer</a></li>
                        <li role="presentation"><a href="#tabs-2" aria-controls="tabs-2" role="tab" data-toggle="tab">Create New Customer</a></li>
                    </ul>
                </p>

                <div class="tab-content">
                    <div id="tabs-1" role="tabpanel" class="tab-pane active">
                        @Html.Partial("~/Views/Communication/SelectCustomer.cshtml", Model.CustomerViewModel.AllCustomers)
                    </div>
                    <div id="tabs-2" role="tabpanel" class="tab-pane">
                        @Html.Partial("~/Views/Communication/CreateCustomer.cshtml", Model)
                    </div>
                </div>
            </div>
        </div>
    </div>

And my create customer partial view is:

@model CommunicationsLog.ViewModels.CommunicationViewModel

<div class="form-horizontal" id="addCustomerForm">
<div class="row">
    <div class="col-md-12">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.Name, new { htmlAttributes = new { @class = "form-control" }, @id = "name" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.Name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, new { htmlAttributes = new { @class = "form-control" }, @id = "email" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.ContactTel, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.ContactTel, new { htmlAttributes = new { @class = "form-control" }, @id = "phone" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.ContactTel, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.CompanyName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.CompanyName, new { htmlAttributes = new { @class = "form-control" }, @id = "company" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.CompanyName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Address, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.Address, new { htmlAttributes = new { @class = "form-control" }, @id = "address" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.Address, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

Any help would be greatly appreciate. Im stumped :)

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

You're using Partials, meaning the html already been loaded and rendered when it reach the client.

To handle the case of Id is being sent, you should mark ..Customer.CustomerId has disabled="disabled" or readonly, this will avoid the Client side of submitting the Input tag, which will result of the Server side "think" (If you implemented it in that fashion) that this is a new customer.

You can easily achieve it using jQuery 1.6+:

$('#TheCustomerId').prop('disabled', true);
$('#TheCustomerId').prop('disabled', false);

Disable on < 1.6: Disable/enable an input with jQuery?

edited May 23 '17 at 12:07

Community

1
1

answered Feb 19 '16 at 09:48

Orel Eraki

10,908
3
23
34

So when the new customer tab is clicked, i disable the hidden field containing customerid which will stop id being returned to the server. And then i reenable it when the select customer tab is selected? – DaRoGa Feb 19 '16 at 09:51
This doesnt seem to work. I created on onclick on my tabs so this was disabled for clicking the new customer tab but the id is still returned to the controller. I have debugged the javascript in browser and i know that the onclick function is being called – DaRoGa Feb 19 '16 at 10:16
100% it will work, add "disabled="disabled" hardcoded to the HTML CustomerId tag and see it will not be sent to the server. – Orel Eraki Feb 19 '16 at 10:33
I have got it working now thank you!!! I noticed that i accidentally had another hidden for field for the same idea lower down so that one was still sending the value through the the controller. Removing one of them has fixed the issue. Thanks for your help @OrelEraki – DaRoGa Feb 19 '16 at 10:42

Reset model values for partial view

1 Answers1