Solved

ASP.NET MVC Edit ViewModel Data

Posted on 2016-10-02
6
119 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 36

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 36

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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
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 36

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
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…
There's a multitude of different network monitoring solutions out there, and you're probably wondering what makes NetCrunch so special. It's completely agentless, but does let you create an agent, if you desire. It offers powerful scalability …
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

632 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