0

good evening... I try to make editable gridview with jquery. when edit button is click, row will change to editable row. but I have a problem. when I try to parsing value to controller, the value can passed.. can some one help me... I use view model to get data from database and I build data from my builder class

this the code

my viewModel

namespace test.Models
{
    public class DataDiriItem
    {
        public int ID { get; set; }
        public string Nama { get; set; }
        public int Umur { get; set; }
    }

    public class ListDataDiri
    {
        public List<DataDiriItem> DataDiriList { get; set; }
    }
}

my viewModelBuilder

public class DataDiriBuilder
    {
        public static List<DataDiriItem> Build(List<DataDiri> datadiri)
        {
            List<DataDiriItem> model = new List<DataDiriItem>();

            foreach (var dd in datadiri)
            {
                DataDiriItem di = new DataDiriItem();
                di.ID = dd.ID;
                di.Nama = dd.Nama;
                di.Umur = dd.Umur;
                model.Add(di);
            }
            return model;
        }
    }

my controller

public ActionResult Index()
        {
            var data = db.DataDiris.AsQueryable().ToList();
            var model = DataDiriBuilder.Build(data);
            return View(model);
        }
        public JsonResult UpdateUser(DataDiriItem model)
        {

            string message = "Success";
            return Json(message, JsonRequestBehavior.AllowGet);
        }

my View

@model List<test.Models.DataDiriItem>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";

    var grid = new WebGrid(Model);
}

<style type="text/css">
    .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;
    }
</style>

<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,
        columns:
            grid.Columns(
             grid.Column("ID", format: @<text>  <span  class="display-mode">@item.ID </span> <label id="ID" class="edit-mode">@item.ID</label> </text>, style: "col1Width" ),
             grid.Column("Nama", format: @<text>  <span  class="display-mode"> <label id="lblNama"  >@item.Nama</label> </span> <input type="text" id="Nama" value="@item.Nama" class="edit-mode" /></text>, style: "col2Width"),
             grid.Column("Umur", format: @<text> <span  class="display-mode"> <label id="lblUmur">@item.Umur</label> </span>  <input type="text" id="Umur" value="@item.Umur" 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)
           ))

@section scripts
    {
    <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 Nama = tr.find("#Nama").val();
                var Umur = tr.find("#Umur").val();
                var ID = tr.find("#ID").html();
                tr.find("#lblNama").text(FirstName);
                tr.find("#lblUmur").text(LastName);
                tr.find('.edit-mode, .display-mode').toggle();

                **var DataDiriItem =
                {
                    "ID" : ID,
                    "Nama" : Nama,    *this the error come.. but I can't solve it*
                    "Umur" : Umur
                };**
                alert(DataDiriItem);
                $.ajax({
                    url: '/Home/UpdateUser/',
                    data: JSON.stringify(DataDiriItem),
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        alert(data);
                    }
                });

            });
        })
</script>
    }
4

1 回答 1

1

Try this,

$('.save-user').on('click', function () {

            var tr = $(this).parent().parent();
            var Nama = tr.find("#Nama").val();
            var Umur = tr.find("#Umur").val();
            var ID = tr.find("#ID").html();

            $.ajax({
                    url: '@Url.Action("UpdateUser", "Home")',
                    data: {Id:ID,Name:Name,Umur:Umur},
                    type: 'Post',

                    success: function (data) {
                        alert(data);
                    }
                });

});

This is just example try with this,

View

<div id="mygrid">
</div>

<div>
    @{
        var grid = new WebGrid(ViewBag.RegisterItems, rowsPerPage: 15, canPage: true, canSort: true, ajaxUpdateContainerId: "gridContent");
        @grid.GetHtml(
                           tableStyle: "row",
                  alternatingRowStyle: "alt",
                  columns: grid.Columns(
                  grid.Column("Name", header: "User Name"),
                  grid.Column("Address", header: "Address"),
                  grid.Column("PhoneNo", header: "Phone No"),
                  grid.Column("", header: "Actions", format: @<text>
        <input type="text" id="name" />
        </text>),
                  grid.Column("", header: "Actions", format: @<text>
        @Html.ActionLink("Edit", "Index", new { Id = item.ID }, new { @class = "edit" })
        <input type="button" value="Assign" id="btnad" />
        @Html.ActionLink("Delete", "Index", new { Id = item.ID })
        </text>)
                 ));
    }
</div>

Script

<script type="text/javascript">

    $(document).ready(function () {
        $("#btnad").on("click", function () {
            var tr = $(this).parent().parent();
            var t = tr.find("#name").val();

            $.ajax({
                url: '@Url.Action("UpdateUser", "Content")',
                type: "Post",
                data: { CustomerNameId: t },
                dataType: 'json',
                success: function (result) {
                    $("#mygrid").html('');
                    $("#mygrid").html(result);
                }
            });
        });

    });
</script>

Controller

 public JsonResult UpdateUser(string CustomerNameId)
        {

            string message = "Success";
            return Json(message, JsonRequestBehavior.AllowGet);
        }

This is perfectly working.

于 2013-09-03T10:26:53.993 回答