Solved

ASP.NET MVC Edit ViewModel Data

Posted on 2016-10-02
6
56 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

0
Comment
Question by:asp_net2
  • 3
  • 3
6 Comments
 
LVL 35

Expert Comment

by:Miguel Oz
ID: 41825746
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

0
 
LVL 4

Author Comment

by:asp_net2
ID: 41825778
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).
0
 
LVL 35

Accepted Solution

by:
Miguel Oz earned 500 total points
ID: 41825797
My bad typo, we should be using vmEdit parameter and its properties to find the required record, the revised methods will look like:
//All properties
public ActionResult Edit(CustomerFormViewModel vmEdit)
{
	if (ModelState.IsValid)
	{
		Customer customer = _context.Customers.SingleOrDefault(c => c.CustId == vmEdit.CustId);

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

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

Open in new window

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

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

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

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 4

Author Comment

by:asp_net2
ID: 41825812
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?
0
 
LVL 35

Expert Comment

by:Miguel Oz
ID: 41825848
No, but this is a different question.
Hint: Search for disable submit button jquery in google.
0
 
LVL 4

Author Closing Comment

by:asp_net2
ID: 41826390
Thank you again Miguel!!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is for Object-Oriented Programming (OOP) beginners. An Interface contains declarations of events, indexers, methods and/or properties. Any class which implements the Interface should provide the concrete implementation for each Inter…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
In this video I am going to show you how to back up and restore Office 365 mailboxes using CodeTwo Backup for Office 365. Learn more about the tool used in this video here: http://www.codetwo.com/backup-for-office-365/ (http://www.codetwo.com/ba…
Both in life and business – not all partnerships are created equal. As the demand for cloud services increases, so do the number of self-proclaimed cloud partners. Asking the right questions up front in the partnership, will enable both parties …

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now