Update dropdown value into database from web grid MVC

Question

1.00/5 (2 votes)

See more:

I tried below,but it is not updating into database from webgrid dropdown

What I have tried:

HTML

<pre>@model IEnumerable<Account_App.Models.CustomerMV>

@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canPage: true, canSort: false);
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        .Grid {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

            .Grid th {
                background-color: #F7F7F7;
                font-weight: bold;
            }

            .Grid th, .Grid td {
                padding: 5px;
                width: 150px;
                border: 1px solid #ccc;
            }

            .Grid, .Grid table td {
                border: 0px solid #ccc;
            }

                .Grid th a, .Grid th a:visited {
                    color: #333;
                }
    </style>
</head>
<body>
    @webGrid.GetHtml(
    htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
    columns: webGrid.Columns(
     webGrid.Column(header: "Customer Id", format: @@item.CustomerId, style: "CustomerId"),
       webGrid.Column(header: "Name", format: @<span> @item.Name <input class="text" type="text" value="@item.Name" style="display:none" /> </span>, style: "Name"),
            webGrid.Column(header: "Country", format: @<span>@item.Country <input class="text" type="text" value="@item.Country" style="display:none" /></span>, style: "Country"),
                    webGrid.Column(header: "User", format:
                    @<span>
                        @item.UserName
                        
                            @Html.DropDownList("UserName", new SelectList(ViewBag.U_ID, "UserID", "UserName", selectedValue: @item.UserID), new { @id = "myid" })
                        
                    </span>, style: "User"),


                            webGrid.Column(format:@<a class="Edit" href="javascript:;">Edit</a><a class="Update" href="javascript:;" style="display:none">Update</a><a class="Cancel" href="javascript:;" style="display:none">Cancel</a>)))

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript">
        //Edit event handler.
        $("body").on("click", "#WebGrid TBODY .Edit", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find(".text").length > 0) {
                    $(this).find(".text").show();
                    $(this).find(".label").hide();
                }
            });
            row.find(".Update").show();
            row.find(".Cancel").show();
            $(this).hide();
        });

        //Update event handler.
        $("body").on("click", "#WebGrid TBODY .Update", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find(".text").length > 0) {
                    var span = $(this).find(".label");
                    var input = $(this).find(".text");
                    var drop = $("#myid option:selected").text();
                    span.html(input.val());
                    row.find(".User").find(".label").html(drop);
                    span.show();
                    input.hide();
                }
            });
            row.find(".Edit").show();
            row.find(".Cancel").hide();
            $(this).hide();

            var customer = {};
            customer.CustomerId = row.find(".CustomerId").find(".label").html();
            customer.Name = row.find(".Name").find(".label").html();
            customer.Country = row.find(".Country").find(".label").html();
            customer.UserId = $("#myid option:selected").val();
            $.ajax({
                type: "POST",
                url: "/Customer/UpdateCustomer",
                data: '{customer:' + JSON.stringify(customer) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });
        });

        //Cancel event handler.
        $("body").on("click", "#WebGrid TBODY .Cancel", function () {
            var row = $(this).closest("tr");
            $("td", row).each(function () {
                if ($(this).find(".text").length > 0) {
                    var span = $(this).find(".label");
                    var input = $(this).find(".text");
                    input.val(span.html());
                    span.show();
                    input.hide();
                }
            });
            row.find(".Edit").show();
            row.find(".Update").hide();
            $(this).hide();
        });
    </script>
</body>
</html>

Controller

C#

<pre> public ActionResult Index()
        {

            //List<Customer> customers = DB.Customers.ToList();
            //return View(customers.ToList());

            var custom = DB.Customers.ToList();
            var user = DB.tblUsers.ToList();



            var investerlist = from e in custom
                               join u in user on e.UserID equals u.UserID into table1
                               from u in table1.ToList()
                               select new CustomerMV
                               {
                                  CustomerId=e.CustomerId,
                                  Country=e.Country,
                                  Name=e.Name,
                                
                                  UserName = u.UserName,
                                    UserID = u.UserID,

                               };
            var UserID = 0;
            ViewBag.U_ID = DB.tblUsers.Where(bt => bt.UserID > UserID);
            // ViewBag.U_ID = new SelectList(DB.tblUsers.Where(bt => bt.UserID > UserID), "UserID", "UserName", "0");


            return View(investerlist);

        }

        [HttpPost]
        public ActionResult UpdateCustomer(Customer customer)
        {
           
            {
                Customer updatedCustomer = (from c in DB.Customers
                                            where c.CustomerId == customer.CustomerId
                                            select c).FirstOrDefault();
                updatedCustomer.Name = customer.Name;
                updatedCustomer.Country = customer.Country;
                updatedCustomer.UserID = customer.UserID;
                DB.SaveChanges();
            }

            return new EmptyResult();
        }

Model class

C#

public class CustomerMV
   {
       public int CustomerId { get; set; }
       public string Name { get; set; }
       public string Country { get; set; }
       public int UserID { get; set; }

       public string UserName { get; set; }
       public CustomerMV customer { get; set; }


   }

Posted 6-Nov-23 19:21pm

akhter86

Add a Solution

Comments

Graeme_Grant 7-Nov-23 2:39am

Did you try to debug the problem? Did you set a breakpoint and step over the code? Why is the code not in a try ... catch handler to catch any exceptions thrown? Write the error to console or debug to see what the error is. Set a breakpoint inside the exception and read the error details - the answer will be there.

akhter86 7-Nov-23 2:55am

there is not error in code,i am facing issue to update value from dropdown list to database,which is not updating

Graeme_Grant 7-Nov-23 3:01am

if it is not saving, then you must have an error. Are you debugging and stepping over the code to watch what happens?

akhter86 7-Nov-23 3:19am

Browsing console display below error

Duplicate form field id in the same form
Multiple form field elements in the same form have the same id attribute value. This might prevent the browser from correctly autofilling the form.
To fix this issue, use unique id attribute values for each form field.

Graeme_Grant 7-Nov-23 3:29am

That is a client side error that needs to be addressed. The message is very clear as to what the issue is and what you need to do to correct it.

Also check the server side once that is corrected.

akhter86 7-Nov-23 3:36am

Server side code ,its fine.so where need to do changes on client side

public ActionResult UpdateCustomer(CustomerMV customer)
{

{
Customer updatedCustomer = (from c in DB.Customers
where c.CustomerId == customer.CustomerId
select c).FirstOrDefault();

updatedCustomer.CustomerId = customer.CustomerId;
updatedCustomer.Name = customer.Name;
updatedCustomer.Country = customer.Country;
updatedCustomer.UserID = customer.UserID;
DB.SaveChanges();
}

return new EmptyResult();
}

Graeme_Grant 7-Nov-23 4:00am

I'm not going to run and debug your code for you, you need to do it. I will point you in the right direction.

You can set breakpoints in your javascript/jQuery on the client side and step through your code.

Again, you're not handling errors, both on the client and server sides. You need to fix this.

As I said before, if you have fixed the client-side, then set a breakpoint on the server side and step through your code. If your client post is not hitting the breakpoint in the server code, then you're pointing at the wrong endpoint or there is an error preventing your posting of data.

akhter86 7-Nov-23 4:13am

ok i try it ,let you know

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Maciej Los · Accepted Answer · 2023-11-07T21:37:00

Quick research on Google:

Quote:
Multiple form field elements in the same form have the same id attribute value. This might prevent the browser from correctly autofilling the form. To fix this issue, use unique id attribute values for each form field.

If you would like to find out which field have the same id, use The W3C Markup Validation Service[^]
Other options are provided here: https://stackoverflow.com/questions/11664473/how-to-find-duplicate-ids-in-a-form[^]