We help IT Professionals succeed at work.

ASP.NET MVC Edit ViewModel Data

asp_net2
asp_net2 asked
on
1,450 Views
Last Modified: 2016-10-03
Hello Experts,

I need help on Updating my data to my ViewModel (CustomerFormViewModel) for my Edit Action Method (HttpPost). I'm currently retrieving all data to my form Edit View based on the Customer's ID, which works fine. I'm just not sure how to update the data to my CustomerFormViewModel in my Edit Action Method (HttpPost). Also, most importantly, I may not need to update all properties, so I was wondering if I could bind only what I need to update. Below are my Models, ViewModel, Controller and View.

Thank you in advance!!!

Models:

    public class Customer
    {
        public int CustId { get; set; }
        public string CustDisplayName { get; set; }
        public string CustFirstName { get; set; }
        public string CustLastName { get; set; }
        public string CustCompanyName { get; set; }
        public string CustAddress { get; set; }
        public string CustPhoneNumber { get; set; }
        public string CustMobileNumber { get; set; }
        public string CustEmailAddress { get; set; }

        public int StId { get; set; }
        public State State { get; set; }
    }


    public class State
    {
        public int StId { get; set; }
        public string StAbbr { get; set; }

        public List<Customer> Customers { get; set; }
    }

Open in new window


CustomerFormViewModel:

public class CustomerFormViewModel
    {
        public int CustId { get; set; }

        [Required(ErrorMessage = "Enter Display Name")]
        [Display(Name = "Display Name")]
        [StringLength(100)]
        public string CustDisplayName { get; set; }

        [Display(Name = "First Name")]
        [StringLength(50)]
        public string CustFirstName { get; set; }

        [Display(Name = "Last Name")]
        [StringLength(50)]
        public string CustLastName { get; set; }

        [Display(Name = "Company Name")]
        [StringLength(50)]
        public string CustCompanyName { get; set; }

        [Display(Name = "Phone Number")]
        [DataType(DataType.PhoneNumber)]
        [StringLength(12)]
        [RegularExpression(@"((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}", ErrorMessage = "Enter a valid phone number")]
        public string CustPhoneNumber { get; set; }

        [Display(Name = "Mobile Number")]
        [DataType(DataType.PhoneNumber)]
        [StringLength(12)]
        [RegularExpression(@"((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}", ErrorMessage = "Enter a valid phone number")]
        public string CustMobileNumber { get; set; }

        //[Required(ErrorMessage = "Enter email address")]
        [Display(Name = "Email Address")]
        [DataType(DataType.EmailAddress)]
        [StringLength(320)]
        [RegularExpression(@"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", ErrorMessage = "Enter a valid email address")]
        public string CustEmailAddress { get; set; }

        [Required(ErrorMessage = "Enter Address")]
        [Display(Name = "Address")]
        [StringLength(100)]
        public string CustAddress { get; set; }

        [Required(ErrorMessage = "Select State")]
        [Display(Name = "State")]
        public int StId { get; set; }

        public IEnumerable<State> States { get; set; }
    }

Open in new window


CustomerController:

public class CustomerController : Controller
    {
        private WebAppDbContext _context;

        public CustomerController(WebAppDbContext context)
        {
            _context = context;
        }


        // GET: /<Customer>/
        public IActionResult Index()
        {
            return View(_context.Customers.ToList());
        }


        public ActionResult Create()
        {
            var states = _context.States.ToList();
            var viewModel = new CustomerFormViewModel
            {
                States = states
            };

            return View(viewModel);
        }


        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(CustomerFormViewModel vm)
        {
            if (ModelState.IsValid)
            {
                var customer = new Customer();
                {
                    customer.CustDisplayName = vm.CustDisplayName;
                    customer.CustFirstName = vm.CustFirstName;
                    customer.CustLastName = vm.CustLastName;
                    customer.CustCompanyName = vm.CustCompanyName;
                    customer.CustAddress = vm.CustAddress;
                    customer.CustPhoneNumber = vm.CustPhoneNumber;
                    customer.CustMobileNumber = vm.CustMobileNumber;
                    customer.CustEmailAddress = vm.CustEmailAddress;
                    customer.StId = vm.StId;
                }
                _context.Customers.Add(customer);
                _context.SaveChanges();
                return RedirectToAction("Index");
            }

            else
            {
                vm.States = _context.States.ToList();
                return View(vm);
            }
        }


        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var customervm = new CustomerFormViewModel();
            {
                Customer customer = _context.Customers.SingleOrDefault(c => c.CustId == id);

                if (customer == null)
                {
                    return NotFound();
                }

                customervm.CustId = customer.CustId;
                customervm.CustDisplayName = customer.CustDisplayName;
                customervm.CustFirstName = customer.CustFirstName;
                customervm.CustLastName = customer.CustLastName;
                customervm.CustCompanyName = customer.CustCompanyName;
                customervm.CustAddress = customer.CustAddress;
                customervm.CustPhoneNumber = customer.CustPhoneNumber;
                customervm.CustMobileNumber = customer.CustMobileNumber;
                customervm.CustEmailAddress = customer.CustEmailAddress;

                // Retrieve list of States
                var states = _context.States.ToList();
                customervm.States = states;

                // Set the selected state
                customervm.StId = customer.StId;
            }
            return View(customervm);
        }


        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(CustomerFormViewModel vmEdit)
        {
            if (ModelState.IsValid)
            {

            }
            return View();
        }


    }

Open in new window


Edit View:

<h2>Edit Customer</h2>

@using (Html.BeginForm("Edit", "Customer"))
{
    <div class="form-group">
        @Html.LabelFor(c => c.CustDisplayName)
        @Html.TextBoxFor(c => c.CustDisplayName, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.CustDisplayName)
    </div>

    <div class="form-group">
        @Html.LabelFor(c => c.CustFirstName)
        @Html.TextBoxFor(c => c.CustFirstName, new { @class = "form-control" })
    </div>

    <div class="form-group">
        @Html.LabelFor(c => c.CustLastName)
        @Html.TextBoxFor(c => c.CustLastName, new { @class = "form-control" })
    </div>

    <div class="form-group">
        @Html.LabelFor(c => c.CustCompanyName)
        @Html.TextBoxFor(c => c.CustCompanyName, new { @class = "form-control" })
    </div>

    <div class="form-group">
        @Html.LabelFor(c => c.CustAddress)
        @Html.TextBoxFor(c => c.CustAddress, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.CustAddress)
    </div>

    <div class="form-group">
        @Html.LabelFor(c => c.CustPhoneNumber)
        @Html.TextBoxFor(c => c.CustPhoneNumber, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.CustPhoneNumber)
    </div>

    <div class="form-group">
        @Html.LabelFor(c => c.CustMobileNumber)
        @Html.TextBoxFor(c => c.CustMobileNumber, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.CustMobileNumber)
    </div>

    <div class="form-group">
        @Html.LabelFor(c => c.CustEmailAddress)
        @Html.TextBoxFor(c => c.CustEmailAddress, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.CustEmailAddress)
    </div>

    <div class="form-group">
        @Html.LabelFor(s => s.StId)
        @Html.DropDownListFor(s => s.StId, new SelectList(Model.States, "StId", "StAbbr"), "", new { @class = "form-control" })
        @Html.ValidationMessageFor(s => s.StId)
    </div>

    @Html.HiddenFor(c => c.CustId)

    <div class="form-group">
        <button type="submit" class="btn btn-primary">Update</button>
    </div>
}

@section scripts {
    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
}

Open in new window

Comment
Watch Question

Miguel OzSenior Software Engineer
CERTIFIED EXPERT
Top Expert 2009

Commented:
For all properties:
public ActionResult Edit(CustomerFormViewModel vmEdit)
{
	if (ModelState.IsValid)
	{
		Customer customer = _context.Customers.SingleOrDefault(c => c.CustId == id);

		if (customer == null)
		{
			return NotFound();
		}

		customer.CustDisplayName = customervm.CustDisplayName;
		customer.CustFirstName = customervm.CustFirstName;
		customer.CustLastName = customervm.CustLastName;
		customer.CustCompanyName = customervm.CustCompanyName;
		customer.CustAddress = customervm.CustAddress;
		customer.CustPhoneNumber = customervm.CustPhoneNumber;
		customer.CustMobileNumber = customervm.CustMobileNumber;
		customer.CustEmailAddress = customervm.CustEmailAddress;
		_context.Entry(customer).State = EntityState.Modified;
		_context.SaveChanges();
		return RedirectToAction("Index");
	}
	return View(album);
}

Open in new window


For some properties you need to modify your view to include in the form section only the required properties and the Id and then modify the controller to retrieve the customer from db and update affected properties. For example to modify phone numbers and email your view will look like:
<h2>Edit Customer</h2>
<div class="form-group">
	@Html.LabelFor(c => c.CustDisplayName)
	@Html.TextBoxFor(c => c.CustDisplayName, new { @class = "form-control" })
	@Html.ValidationMessageFor(c => c.CustDisplayName)
</div>

<div class="form-group">
	@Html.LabelFor(c => c.CustFirstName)
	@Html.TextBoxFor(c => c.CustFirstName, new { @class = "form-control" })
</div>

<div class="form-group">
	@Html.LabelFor(c => c.CustLastName)
	@Html.TextBoxFor(c => c.CustLastName, new { @class = "form-control" })
</div>

<div class="form-group">
	@Html.LabelFor(c => c.CustCompanyName)
	@Html.TextBoxFor(c => c.CustCompanyName, new { @class = "form-control" })
</div>

<div class="form-group">
	@Html.LabelFor(c => c.CustAddress)
	@Html.TextBoxFor(c => c.CustAddress, new { @class = "form-control" })
	@Html.ValidationMessageFor(c => c.CustAddress)
</div>

@using (Html.BeginForm("Edit", "Customer"))
{

    <div class="form-group">
        @Html.LabelFor(c => c.CustPhoneNumber)
        @Html.TextBoxFor(c => c.CustPhoneNumber, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.CustPhoneNumber)
    </div>

    <div class="form-group">
        @Html.LabelFor(c => c.CustMobileNumber)
        @Html.TextBoxFor(c => c.CustMobileNumber, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.CustMobileNumber)
    </div>

    <div class="form-group">
        @Html.LabelFor(c => c.CustEmailAddress)
        @Html.TextBoxFor(c => c.CustEmailAddress, new { @class = "form-control" })
        @Html.ValidationMessageFor(c => c.CustEmailAddress)
    </div>

    <div class="form-group">
        @Html.LabelFor(s => s.StId)
        @Html.DropDownListFor(s => s.StId, new SelectList(Model.States, "StId", "StAbbr"), "", new { @class = "form-control" })
        @Html.ValidationMessageFor(s => s.StId)
    </div>

    @Html.HiddenFor(c => c.CustId)

    <div class="form-group">
        <button type="submit" class="btn btn-primary">Update</button>
    </div>
}

@section scripts {
    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
}

Open in new window

MVC will only send to controller properties within the form scope, then on your controller you just update those properties as follows:
public ActionResult Edit(CustomerFormViewModel vmEdit)
{
	if (ModelState.IsValid)
	{
		Customer customer = _context.Customers.SingleOrDefault(c => c.CustId == id);

		if (customer == null)
		{
			return NotFound();
		}

		//only update the required properties
		customer.CustPhoneNumber = customervm.CustPhoneNumber;
		customer.CustMobileNumber = customervm.CustMobileNumber;
		customer.CustEmailAddress = customervm.CustEmailAddress;
		_context.Entry(customer).State = EntityState.Modified;
		_context.SaveChanges();
		return RedirectToAction("Index");
	}
	return View(album);
}

Open in new window

Author

Commented:
Hi Miguel Oz,

I'm getting an error message: "The name "id" does not exist in the current context" on the line below:

Customer customer = _context.Customers.SingleOrDefault(c => c.CustId == id);

Open in new window


I also added return View(vmEdit) instead of return View(album).
Senior Software Engineer
CERTIFIED EXPERT
Top Expert 2009
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Thank you Miguel Oz, that worked!! Thank you for your time and patience, truly appreciate it. I was really overlooking that :) The solution that you provided, does it protect from over posting? If not, what is the best approach to protect against users from over posting?
Miguel OzSenior Software Engineer
CERTIFIED EXPERT
Top Expert 2009

Commented:
No, but this is a different question.
Hint: Search for disable submit button jquery in google.

Author

Commented:
Thank you again Miguel!!

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.