ASP.NET MVC Edit ViewModel Data

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

LVL 4
asp_net2Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Miguel OzConnect With a Mentor Software EngineerCommented:
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
 
Miguel OzSoftware EngineerCommented:
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
 
asp_net2Author 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).
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
asp_net2Author 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?
0
 
Miguel OzSoftware EngineerCommented:
No, but this is a different question.
Hint: Search for disable submit button jquery in google.
0
 
asp_net2Author Commented:
Thank you again Miguel!!
0
All Courses

From novice to tech pro — start learning today.