locked
Create an Editable WebGrid In ASP.NET MVC 4 RRS feed

  • Question

  • User1151703306 posted

    Hi,

    I need to create an editable WebGrid in ASP.NET MVC 4 through which I will be able to edit, delete and update the data in the grid itself.

    This is the tutorial

    I have tried suggestion's of tutorial but in VS 2019 debug on the view the return is

    enter image description here

    It seems that the JavaScript part of the code is not working...

    How to do resolve this?

    My code is shown below:

    View

    IEnumerable<Ins.Models.PersonModel>
    
    @{
        ViewBag.Title = "Grid";
        WebGrid grid = new WebGrid(source: Model, canPage: true, canSort: false, rowsPerPage: 5);
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Recovery</title>
        <style>
            .edit-mode {
            }
    
            .edit-user {
            }
    
                .edit-user display-mode {
                }
    
            .save-user edit-mode {
            }
    
            .display-mode {
            }
    
            .cancel-user {
            }
    
            .webgrid-table {
                font-family: Arial,Helvetica,sans-serif;
                font-size: 14px;
                font-weight: normal;
                width: 650px;
                display: table;
                border-collapse: collapse;
                border: solid px #C5C5C5;
                background-color: white;
            }
    
                .webgrid-table td, th {
                    border: 1px solid #C5C5C5;
                    padding: 3px 7px 2px;
                }
    
            .webgrid-header, .webgrid-header a {
                background-color: #E3E3E3;
                color: black;
                text-align: left;
                text-decoration: none;
            }
    
            .webgrid-footer {
            }
    
            .webgrid-row-style {
                padding: 3px 7px 2px;
            }
    
            .webgrid-alternating-row {
                background-color: #F5F5F5;
                padding: 3px 7px 2px;
            }
    
            .col1Width {
                width: 50px;
            }
    
            .col2Width {
                width: 200px;
            }
    
            hr.new3 {
                border-top: 1px dotted #a19c9c;
            }
        </style>
    
        <script type="text/javascript">
            $(function () {
                $('.edit-mode').hide();
                $('.edit-user, .cancel-user').on('click', function () {
                    var tr = $(this).parents('tr:first');
                    tr.find('.edit-mode, .display-mode').toggle();
                });
    
                $('.save-user').on('click', function () {
                    var tr = $(this).parents('tr:first');
    
                    var Name = tr.find("#Name").val();
                    var UserID = tr.find("#UserID").html();
    
                    tr.find("#lblName").text(Name);
                    tr.find('.edit-mode, .display-mode').toggle();
    
                    var UserModel =
                    {
                        "ID": UserID,
                        "Name": Name
                    };
                    $.ajax({
                        url: '/User/ChangeUser/',
                        data: JSON.stringify(UserModel),
                        type: 'POST',
                        contentType: 'application/json; charset=utf-8',
                        success: function (data) {
                            alert(data);
                        }
                    });
    
                });
            })
        </script>
    
    </head>
    <body>
        <br />
        <div class="row">
            <div class="col-md-4">
                Welcome <strong>@HttpContext.Current.User.Identity.Name</strong>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-offset-0">
                <h4>@ViewBag.Title</h4>
            </div>
        </div>
        <hr class="new3">
    
        <div class="row">
            <div id="gridContent" style="padding:20px;">
                @grid.GetHtml(
                tableStyle: "webgrid-table",
                headerStyle: "webgrid-header",
                footerStyle: "webgrid-footer",
                alternatingRowStyle: "webgrid-alternating-row",
                selectedRowStyle: "webgrid-selected-row",
                rowStyle: "webgrid-row-style",
                mode: WebGridPagerModes.All,
                firstText: "<< First",
                previousText: "< Prev",
                nextText: "Next >",
                lastText: "Last >>",
    
    columns:
                grid.Columns(
                 grid.Column("ID", format: @<text>
                        <span class="display-mode">@item.sID </span>
                        <label id="UserID" class="edit-mode">@item.sID</label>
                </text>, style: "col1Width"),
    
    
    grid.Column("TicketId", "TicketId", format: @<text>
        <span class="display-mode">
            <label id="lblName">@item.TicketId</label>
        </span>
        <input type="text" id="Name" value="@item.TicketId" class="edit-mode" />
    </text>, style: "col2Width"),
    
    grid.Column("Action", format: @<text>
        <button class="edit-user display-mode">Edit</button>
        <button class="save-user edit-mode">Save</button>
        <button class="cancel-user edit-mode">Cancel</button>
    </text>, style: "col3Width", canSort: false)
    ))
            </div>
        </div>
    </body>
    </html>
    

    Controller

        public JsonResult ChangeUser(PersonModel model)
        {
            string message = "Success";
            return Json(message, JsonRequestBehavior.AllowGet);
        }
    
        public ActionResult Recovery()
        {
            List<PersonModel> lmd = new List<PersonModel>(); 
            DataSet ds = new DataSet();
            Connection.Connection con = new Connection.Connection();
            ds = con.mydata(); 
    
            foreach (DataRow dr in ds.Tables[0].Rows)  
            {
                lmd.Add(new PersonModel
                {
                    sID = Convert.ToInt64(dr["sID"]),
                    TicketId = (string)dr["TicketId"],
                });
            }
    
            return View(lmd);
        }
    Sunday, January 10, 2021 8:29 AM

Answers

  • User-1545767719 posted

    Is a use of MVC must? If not, I suggest you to switch to the Web Forms.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 10, 2021 8:39 AM

All replies

  • User-1545767719 posted

    Is a use of MVC must? If not, I suggest you to switch to the Web Forms.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 10, 2021 8:39 AM
  • User1312693872 posted

    Hi,Golia

    Did you use the _Layout.cshtml?

    If so, your scripts should add in this form:


    <div>
    ..
    </div>
    ....
    </html>

    @section scripts
    { <script> ... </script> }

    Because in _Layout,you will find this code:

    @RenderSection("scripts", required: false)

    it allows all of your Views to dynamically insert script files or CSS files or what ever into places in the defining page, so you should add @section

    scripts to put your scripts if you use _Layout in your view.

    Result:

    Best Regards,

    Jerry Cai

    Monday, January 11, 2021 6:54 AM