Click here to Skip to main content
15,844,477 members
Please Sign up or sign in to vote.
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
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.

1 solution

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[^]
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900