Save dynamic data to DB on Submit Click[Answered] RSS

4 replies

Last post Sep 27, 2018 11:04 AM by shashikant2011

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

shashikant20...

Member

30 Points

184 Posts

Save dynamic data to DB on Submit Click

Sep 22, 2018 02:10 PM|shashikant2011|LINK

Hi,

I have two controller methods one contains a WebGrid with Edit and Delete functionality. On Edit I have a Partial View opening in model popup. In Edit View HtmlElements are generated dynamically on the basis of IDictionary object. Here is my Controller code:

using MVCWebGridDemo.Models;
using System;
using System.Collections.Generic;
using System.Data;
using System.Dynamic;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;

namespace MVCWebGridDemo.Controllers
{
    public class CtiServicesController : Controller
    {
        CRMDBContext dbContext = new CRMDBContext();
        public ActionResult Index()
        {
            var dtSerivices = dbContext.FetchServiceList();
            var model1 = new List<dynamic>(dtSerivices.Rows.Count);

            List<WebGridColumn> columns = new List<WebGridColumn>();

            foreach (DataRow row in dtSerivices.Rows)
            {
                var obj = (IDictionary<string, object>)new ExpandoObject();

                foreach (DataColumn col in dtSerivices.Columns)
                {
                    // string.Format("{0}", "format: @< text >  < span  class=\"display-mode\">{1}</span> <label id = {2} class=\"edit-mode\">{3}</label> </text>, style: \"col1Width\" ",col.ColumnName,row[col], col.ColumnName, row[col]);
                    obj.Add(col.ColumnName, row[col]);
                    if (columns.Count < dtSerivices.Columns.Count)
                    {
                        columns.Add(new WebGridColumn() { ColumnName = col.ColumnName, Header = col.ColumnName.Replace("_", " ") });
                    }
                }
                model1.Add(obj);
            }
            columns.Add(new WebGridColumn()
            {
                Header = "Edit",
                Format = (item) =>
                {
                    return new HtmlString(string.Format("<a href =\"javascript:void(0);\" class=\"edit-row\" id=\"{0}\">Edit</a>", item.id));
                }
            });
            columns.Add(new WebGridColumn()
            {
                Header = "Delete",
                Format = (item) =>
                {
                    return new HtmlString(string.Format("<a href =\"javascript:void(0);\" class=\"delete-row\" id=\"{0}\">Delete</a>", item.id));
                }

               
            });
            ViewBag.Columns = columns;
            return View(model1);
        }

        public ActionResult EditGrid(int id)
        {
            
            var obj = (IDictionary<string, object>)new ExpandoObject();
            try
            {
                var dtSerivices = dbContext.FetchServiceList();
                var dataModel = dtSerivices.AsEnumerable().Where(x => x.Field<int>(0) == id).FirstOrDefault();
                
                foreach (DataColumn dc in dtSerivices.Columns)
                {
                    obj.Add(dc.ColumnName, dataModel[dc.ColumnName]);
                }
            }
            catch (Exception ex)
            {
                string exception = ex.Message;
            }
            //ViewData["Member"] = obj;
            return PartialView("EditGrid", obj);
        }
        [HttpPost]
        public ActionResult Update(IDictionary<string,object> mobj)
        {
            foreach(KeyValuePair<string,object> entry in mobj)
            {
                var result = entry.Key;
            }
            
            return new EmptyResult();
        }


        public ActionResult DeleteGrid(int id)
        {
            MyClass myClass = new MyClass();
            myClass.id = id.ToString();
            return View();
        }

    }
}

Index View:

@{
    Layout = null;
    //var grid = new WebGrid(Model);
    var grid = new WebGrid(Model, ajaxUpdateContainerId: "grid", ajaxUpdateCallback: "setArrows");
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/bootstrap-3.3.6-dist/js/jquery-1.9.1.js"></script>
    <script src="~/bootstrap-3.3.6-dist/js/bootstrap.js"></script>
    <style type="text/css">
        .mainpanel {
            margin-left: 230px;
            min-height: 636px;
            padding: 20px;
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-left: 20px;
        }

        .info th {
            background: #E0E0E0 !important;
        }

            .info th a {
                color: #000000;
                font-weight: normal;
            }

        .webgrid-header {
            background-color: #A7C942;
            color: #FFFFFF;
            padding-bottom: 4px;
            padding-top: 5px;
            text-align: left;
        }

        .webgrid-footer {
            background-color: #ffd800;
            padding: 3px 7px 2px;
        }

        .webgrid-row-style {
            padding: 3px 7px 2px;
        }

        .webgrid-alternating-row {
            background-color: #EAF2D3;
            padding: 3px 7px 2px;
        }
    </style>
    <script type="text/javascript">
       
        function setArrows() {
            alert('test');
            var dir = $('#dir').val();
            var col = $('#col').val();
            var header = $('th a[href*=' + col + ']');
            if (dir == 'Ascending') {
                header.text(header.text() + ' ▲');
            }
            if (dir == 'Descending') {
                header.text(header.text() + ' ▼');
            }
        };

        $(document).ready(function () {
                     
            $(".edit-row").click(function () {
                //$(".edit-row").removeAttr('href');
                var tr = $(this).parents('tr:first');
                id = $(this).prop('id');
                // alert(id);

                $.ajax({
                    type: "GET",
                    url: "/CtiServices/EditGrid/" + id,
                    contentType: "application/json; charset=utf-8",
                    datatype: "json",
                    success: function (data) {
                        debugger;
                        $('.modal-body').html(data);
                        $('#editModal').modal();
                        $('#editModal').modal('show');
                    },
                    error: function () {
                        alert("Content load failed.");
                    }
                });
            });

            $(".delete-row").click(function () {
                var tr = $(this).parents('tr:first');
                id = $(this).prop('id');
                $.ajax({
                    type: "GET",
                    url: "/CtiServices/DeleteGrid/" + id,
                    contentType: "application/json; charset=utf-8",
                    datatype: "json",
                    success: function (data) {
                    },
                    error: function () {
                        alert("Content load failed.");
                    }
                });
            });
        });
        
    </script>
</head>
<body>
    <div>

 @grid.GetHtml(
   tableStyle: "table table-bordered",
    headerStyle: "info",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "gridrow",
         columns: ViewBag.Columns)
        @Html.Hidden("dir", grid.SortDirection) @Html.Hidden("col", grid.SortColumn)
    </div>

    <div class="modal fade" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Edit</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    @functions {
        public static string Sorter(string columnName, string columnHeader, WebGrid grid)
        {
            return string.Format("{0} {1}", columnHeader, grid.SortColumn == columnName ? grid.SortDirection == SortDirection.Ascending ? "▲" : "▼" : string.Empty);
        }
    }
</body>
</html>

Here is my Partial View for Edit which opens in Model Popup on click of Edit in above WebGrid

@model IDictionary<string, object>
<link href="~/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/bootstrap-3.3.6-dist/js/jquery-1.9.1.js"></script>
<script src="~/bootstrap-3.3.6-dist/js/bootstrap.js"></script>
<style type="text/css">
    .webgrid-table {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 1.2em;
        width: 100%;
        display: table;
        border-collapse: separate;
        border: solid 1px #ff6a00;
        background-color: white;
    }

        .webgrid-table td, th {
            border: 1px solid #ff6a00;
            padding: 3px 7px 2px;
            text-align: left;
        }

    .webgrid-header {
        background-color: #ff6a00;
        color: #ffffff;
        padding-bottom: 4px;
        padding-top: 5px;
        text-align: left;
    }

    .webgrid-footer {
    }

    .webgrid-row-style {
        padding: 3px 7px 2px;
    }

    .webgrid-alternating-row {
        background-color: #00ffff;
        padding: 3px 7px 2px;
    }
</style>
<div id="gridContent">
    
    @using (Html.BeginForm("Update", "CtiServices", FormMethod.Post))
    {
        <div class="form-group">
            <div class="col-md-10">
                @foreach (var entry in Model)
                {
                    if (entry.Key != "id")
                    {
                        @Html.Label(entry.Key)
                        @Html.EditorFor(model => entry.Value, new { @class = "control-label col-md-2" })
                        @Html.ValidationMessageFor(model => entry.Key)
                    }
                    else
                    {
                        @Html.Label(entry.Key)
                        @Html.Label(entry.Value.ToString())
                    }
                }
            </div>
        </div>

        <input type="submit" value="Save" class="btn btn-default" />
    }

</div>

On Save button click I want to save the updated values, but on Update Action method i am unable to see those values instead I am getting controller and action, see screenshot Update Action Method Screenshot

please help

- Reply
Nan Yu
All-Star

18815 Points

3831 Posts
Re: Save dynamic data to DB on Submit Click

Sep 24, 2018 03:16 AM|Nan Yu|LINK
Hi Sanjeev,

Please look at article : https://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

If the signature looks like this:
```
public ActionResult Blah(IDictionary<string, Company> stocks) {
  // ...
}
```
You will create html like :
```
<input type="text" name="stocks[0].Key" value="MSFT" />
<input type="text" name="stocks[0].Value.CompanyName" value="Microsoft Corporation" />
<input type="text" name="stocks[0].Value.Industry" value="Computer Software" />
<input type="text" name="stocks[1].Key" value="AAPL" />
<input type="text" name="stocks[1].Value.CompanyName" value="Apple, Inc." />
<input type="text" name="stocks[1].Value.Industry" value="Consumer Devices" />
```
If the key or value type is a complex type (like Company, in the above example), then we treat parameterName[index].Key or parameterName[index].Value as the entire field prefix and start appending the .PropertyName suffix to the end of it. The index must also be zero-based and unbroken .

You can also refer to this thread :

https://stackoverflow.com/questions/5191303/asp-net-mvc-binding-to-a-dictionary

Best Regards,

Nan Yu
- Reply
shashikant20...
Member

30 Points

184 Posts
Re: Save dynamic data to DB on Submit Click

Sep 24, 2018 08:08 AM|shashikant2011|LINK
Thanks for your reply.

Please tell me where I am doing wrong and why I am not getting values in object properties here. It will be much helpful for me if you can show me a sample code.
```
[HttpPost]
        public ActionResult Update(IDictionary<string,object> mobj)
        {
            foreach(KeyValuePair<string,object> entry in mobj)
            {
                var result = entry.Key;
            }
            
            return new EmptyResult();
        }
```
Thanks

Nan Yu

All-Star

18815 Points

3831 Posts

Re: Save dynamic data to DB on Submit Click

Sep 25, 2018 06:38 AM|Nan Yu|LINK

Hi Sanjeev,

We read in the properties is by looking for parameterName[index].PropertyName. The index must be zero-based and unbroken. So modify your code like :

@using (Html.BeginForm("Update", "YourController", FormMethod.Post))
{
    <div class="form-group">
        <div class="col-md-10">

            @{int i = 0;}
            @foreach (var entry in Model)
            {

                if (entry.Key != "id")
                {
                  

                    <input type="hidden" name="@("mobj[" +@i + "].Key")"
                           value="@entry.Key" />
                    <input type="text" name="@("mobj[" +@i + "].Value")" value="@entry.Value" />
                 
                    i++;

                }
                else
                {
                 
                }
            }


        </div>
    </div>

    <input type="submit" value="Save" class="btn btn-default" />
}

Then you could find the data in controller :

Best Regards,

Nan Yu

- Reply
shashikant20...
Member

30 Points

184 Posts

Re: Save dynamic data to DB on Submit Click

Sep 27, 2018 11:04 AM|shashikant2011|LINK

Thank you so much Nan Yu, for your sample code which helped me a lot. Finally my problem is resolved.

‹ Previous Thread|Next Thread ›