locked
CRUD Operation with Reusable Partial View in Modal Dialog RRS feed

  • Question

  • User1122355199 posted

    Hello everyone and thanks for the help in advance.  I'm rewriting some code that uses jQuery dialog boxes for both add and edit functions.  On the edit function, I am populating the form fields of the dialog using JSON from a webapi call.  I would like to try using partial views for both the add and edit functions, however, I have noticed that most example seem to utilize different partial views for the add and edit functions, which seems to be a needless complication.  Would someone be able to point m to an example where the partial view is reused and also whether this is even advisable.  Any help would be appreciated.

    Friday, November 16, 2018 8:04 PM

Answers

  • User475983607 posted

    I am missing what you are telling me.  Is the architecture you're suggesting that all data that may be available to edit be loaded on the initial HTTP request and then use the script to populate the edit?

    Yes...

    Here's an example that loads a partial in the DOM when edit or add is clicked.

    Controller

        public class HomeController : Controller
        {
            private List<Widget> db;
            public HomeController()
            {
                db = new List<Widget>()
                {
                    new Widget()
                    {
                        WidgetId = 1,
                        Name = "Hello World",
                        ddlTemperatureUnits = "F",
                        ddlTempEnteredBy = "Spongebob"
                    },
                    new Widget()
                    {
                        WidgetId = 2,
                        Name = "foo",
                        ddlTemperatureUnits = "F",
                        ddlTempEnteredBy = "Patrick"
                    },
                    new Widget()
                    {
                        WidgetId = 3,
                        Name = "Bar",
                        ddlTemperatureUnits = "C",
                        ddlTempEnteredBy = "Squidward"
                    }
                };
            }
    
            [HttpGet]
            public ActionResult Default()
            {
                return View();
            }
    
    
            [HttpPost]
            public ActionResult DefaultUpdate(Widget vm)
            {
                return Json(vm);
            }
    
            [HttpPost]
            public ActionResult DefaultInsert(Widget vm)
            {
                return Json(vm);
            }
    
            [HttpGet]
            public ActionResult PopulateDefaultForm(int? id)
            {
                ViewBag.Temperature = new List<SelectListItem>{
                  new SelectListItem()
                  {
                      Text="--Select--",
                      Value = "0"
                  },
                  new SelectListItem()
                  {
                      Text="F",
                      Value = "F"
                  },
                  new SelectListItem()
                  {
                      Text="C",
                      Value = "C"
                  },
              };
                ViewBag.User = new List<SelectListItem>()
                {
                    new SelectListItem()
                    {
                        Text = "--Select--",
                        Value = "0"
                    },
                    new SelectListItem()
                    {
                        Text = "Spongebob",
                        Value = "Spongebob"
                    },
                    new SelectListItem()
                    {
                        Text = "Patrick",
                        Value = "Patrick"
                    },
                    new SelectListItem()
                    {
                        Text = "Squidward",
                        Value = "Squidward"
                    }
                };
    
                if (id.HasValue)
                {
                    var vm = db.Where(m => m.WidgetId == id.Value).FirstOrDefault();
                    return PartialView(vm);
                }
                else
                {
                    return PartialView();
                }
            }

    Default View

    @{
        ViewBag.Title = "Default";
    }
    
    <h2>Index</h2>
    
    <div style="width:50%;">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                    <th scope="col">Temperature</th>
                    <th scope="col">User</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Hello World</td>
                    <td>F</td>
                    <td>Spongebob</td>
                    <td><a id="1" class="edit" data-id="1" href="#">edit</a></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Foo</td>
                    <td>F</td>
                    <td>Patrick</td>
                    <td><a id="2" class="edit" data-id="2" href="#">edit</a></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Bar</td>
                    <td>C</td>
                    <td>Squidward</td>
                    <td><a id="3" class="edit" data-id="3" href="#">edit</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <hr />
    <div>
        <!-- Button trigger modal -->
        <button id="Button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Add
        </button>
    
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                
        </div>
        
        
    </div>
    @section Scripts {
        <script>
    
    
            $('.edit').click(function () {
                var id = $(this).data('id');
                $("#myModal").load("/Home/PopulateDefaultForm/" + id);
                $('#myModal').modal('show');
            });
            $('#Button1').click(function () {
                $("#myModal").load("/Home/PopulateDefaultForm");
            });
    
        </script>
    }

    Partial

    @model MvcDemo.Models.Widget
    
    @{ 
        string action = "DefaultInsert";
        if(Model != null){
            action = "DefaultUpdate";
        }
    }
    <form method="post" action="@action">
        <div class="modal-dialog" role="document">
            <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" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        @Html.HiddenFor(m => m.WidgetId)
                        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
                    </div>
                    <div class="form-group">
                        @Html.DropDownListFor(m => m.ddlTemperatureUnits, ViewBag.Temperature as List<SelectListItem>, new { @class = "form-control" })
                    </div>
                    <div class="form-group">
                        @Html.DropDownListFor(m => m.ddlTempEnteredBy, ViewBag.User as List<SelectListItem>, new { @class = "form-control" })
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" class="btn btn-primary" value="Save changes" />
                </div>
            </div>
        </div>
    </form>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 19, 2018 2:22 PM

All replies

  • User475983607 posted

    Partials are reusable HTML.  Unless the HTML Form is used on more than one page then there's not a good reason to use a partial.  Just populate an HTML Form within the model right in the View along with your table of records of however you're displaying records.

    When the user clicks "Add" open the modal for data entry.  That part is pretty easy just show the modal.

    When the user clicks edit, populate the HTML Form from the DOM - a record in the list of items on the page.

    The HTML Forms target action will just look for a record ID to determine if the submit is an Add or Edit.  

    IMHO, you don't need the partial and action to render the partial unless you are building a client side application which in that case you should use a client binding API like React or Angular.

    Friday, November 16, 2018 8:36 PM
  • User1122355199 posted

    Thanks for the response.  As usual, you are speaking at a graduate school level to a toddler, so it takes me a little time to process (not your fault, its mine).  Let's assume for a minute that the I might want to reuse the partial views on multiple pages.  So the add record would require no data population, however, the edit function would.  Would that require two separate partial views, i.e. one that expects a model to be passed and another that doesn't?

    IMHO, you don't need the partial and action to render the partial unless you are building a client side application which in that case you should use a client binding API like React or Angular.

    This is where I wrestle with understanding which method to choose.  When you say client side application, I'm confused by what you mean since, in my mind anything that requires user input is a client-side application.  So when would you choose React, Angular, or even jQuery coupled with an API over basic MVC architecture?

    Saturday, November 17, 2018 3:20 PM
  • User1120430333 posted

    This is where I wrestle with understanding which method to choose. When you say client side application, I'm confused by what you mean since, in my mind anything that requires user input is a client-side application. So when would you choose React, Angular, or even jQuery coupled with an API over basic MVC architecture?

    The 3 JavaScript plugins you talk about are client-side technology coding that run on the hosting browser technology such as Edge, IE, Firefox, Chrome etc. and etc. being hosted by a client computer that is accessing  a Web server program ruining on a Web server.

    Service-side code in your example in understanding that .NET code such as C# or VB.NET is server-side code that can only run on the hosting  Web server being hosted by a computer.

    MVC is a UI design pattern, which originated at the desktop program usage.

    https://www.codeproject.com/Articles/228214/Understanding-Basics-of-UI-Design-Pattern-MVC-MVP

    https://medium.com/of-all-things-tech-progress/understanding-mvc-architecture-with-react-6cd38e91fefd

    Saturday, November 17, 2018 6:37 PM
  • User1122355199 posted

    Thanks for the response.  I do understand the difference between client vs. server side.  What I am specifically asking is on a basic CRUD operation, this could be accomplished using a combination of server side and client side such as ajax, or it could be accomplished entirely on the server side using MVC (or webforms or some other technology).  So in the case of populating forms for editing, this could be accomplished via server side code or done through client side.  So my question is what to consider in deciding.

    Saturday, November 17, 2018 6:58 PM
  • User1120430333 posted

    Clint-side coding is what one does if he or she wants responsive Web application in regards to user interactions at the UI. You're going to use server side code at some point for CRUD whether that be using ASP.NET MVC,  a WebAPI or Web service for CRUD.

    Saturday, November 17, 2018 8:19 PM
  • User475983607 posted

    kmcnet

    What I am specifically asking is on a basic CRUD operation, this could be accomplished using a combination of server side and client side such as ajax, or it could be accomplished entirely on the server side using MVC (or webforms or some other technology).  So in the case of populating forms for editing, this could be accomplished via server side code or done through client side.  So my question is what to consider in deciding.

    Correct, decide where the HTML form is populated; the server, the client or a mixture of both.   Modals and partials do not matter at this decision point as both are just HTML and HTML is easily moved around (refactored).

    The following code demo is a working starting point that can be refactored  to incorporate a partial and AJAX.

        public class HomeController : Controller
        {
    
            [HttpGet]
            public ActionResult Index()
            {
                return View();
            }
    
            [HttpPost]
            public ActionResult Index(Widget vm)
            {
                if(vm.WidgetId == 0)
                {
                    return Content($"Saved {vm.Name}");
                }
                else
                {
                    return Json(vm);
                }
                
            }
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <div style="width:50%;">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Hello World</td>
                    <td><a id="1" class="edit" href="#">edit</a></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Foo</td>
                    <td><a id="2" class="edit" href="#">edit</a></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Bar</td>
                    <td><a id="3" class="edit" href="#">edit</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <hr />
    <form method="post">
        <div class="form-group">
            <input type="hidden" class="form-control" id="WidgetId" name="WidgetId" value="0" />
            <label for="WidgetName">Widget Name</label>
            <input type="text" class="form-control" id="WidgetName" name="Name" placeholder="Widget Name" />
        </div>
        <div class="form-check">
            <input id="Save" type="submit" value="Save" />
        </div>
    </form>
    
    @section Scripts {
        <script>
            $('table tbody tr ').click(function () {
                var id = $(this).find('[scope="row"]').text();
                var name = $(this).find('td:nth-child(2)').text();
                console.log(id + " : " + name);
    
                $('#WidgetId').val(id);
                $('#WidgetName').val(name);
            });
    
        </script>
    }

    The GET Index action returns a table of records and a visible HTML form.  Clicking the edit link populates the HTML Form from the table.  Or the user can enter a new record.  The "Save" button invokes the POST Index method and passes the Widget model.  The POST Index method looks at the WidgetId and if the ID is 0 then it does a fake Add otherwise it does a fake update.

    Adding a modal form this point is very simple.  Just warp the Form in a modal and add a bit of JavaScript to open the model.  Adding a partial is simple too.  Just copy the HTML Form to a Partial, add AJAX code to grab the HTML (the Form) along with the the Action method, then populate the DOM in the AJAX response handler.

    Saturday, November 17, 2018 11:42 PM
  • User1122355199 posted

    Thanks for the response.  So you are using ajax to populate the edit function rather than populating the edit on the server side using Razor.  I assume this is easier than server side?

    Sunday, November 18, 2018 12:12 AM
  • User475983607 posted

    kmcnet

    Thanks for the response.  So you are using ajax to populate the edit function rather than populating the edit on the server side using Razor.  I assume this is easier than server side?

    Confused... There is no AJAX whatsoever in the sample code.  I spent a bit of time trying to come up with a code sample to get you thinking.  Obviously, I failed as it seems that you did not play with the code...

    Sunday, November 18, 2018 12:54 AM
  • User1122355199 posted

    Thanks for the response.  I did play with the code.  What I am saying is that during the edit function, you are populating the form using client side scripting rather than server side.  By extension, in an actual application, there would be data returned via ajax.  I assume this is why you return Json data rather than a view. For practical purposes, lets look at a slightly more complex example that has more real world application.  Assume a very simple form:

    <div id="divnewvital">
        <ul id="ulnewvital">
            <li>
                <label for="txtTemperature" id="lblTemperature">Temp:</label>
                <input id="txtTemperature" />
                <select ID="ddlTemperatureUnits">
                    <option Value="F">F</option>
                    <option Value="C">C</option>
                </select>
            </li>
            <li>
                <Label ID="lblTempEnteredBy" for="ddlTempEnteredBy">Temperature Entered By:</Label>
                <select ID="ddlTempEnteredBy">
                    <option Value="Spongebob">Spongebob</option>
                    <option Value="Patrick">Patrick</option>
                    <option Value="Squidward">Squidward</option>
    	    </select>
            </li>
        </ul>
    </div>

    Further, let's assume that ddlTempEnteredBy is populated by a list of employees coming from a database.  So in an edit function ddlTempEnteredBy would first need to be rendered using the database call and then the original employee entered would need to be selected.  I understand how this can be done using client side code with an api, however, I want to know how to do this server side with Razor.  Not difficult in the webforms world, but seems difficult (an perhaps a bad idea) in MVC.
     

    Sunday, November 18, 2018 2:47 AM
  • User475983607 posted

    What I am saying is that during the edit function, you are populating the form using client side scripting rather than server side.  By extension, in an actual application, there would be data returned via ajax.  I assume this is why you return Json data rather than a view. For practical purposes, lets look at a slightly more complex example that has more real world application.

    Your making assumptions of real world web applications design.  I'm simply trying to show you another way of solving the problem.  I built a base design that is easily extended.

    Further, let's assume that ddlTempEnteredBy is populated by a list of employees coming from a database.  So in an edit function ddlTempEnteredBy would first need to be rendered using the database call and then the original employee entered would need to be selected. 

    I'm suggesting an approach that populated the HTML on the initial HTTP GET rather than needing to make several HTTP requests.  Either approach works.  The main difference is your approach requires several HTTP requests any my suggested design takes two.

    I understand how this can be done using client side code with an api, however, I want to know how to do this server side with Razor.  Not difficult in the webforms world, but seems difficult (an perhaps a bad idea) in MVC

    I updated my initial code to include the selects.  The select content is hard coded on the server but it could just as easily be populated from a strongly types View or Partial.

    Updated ViewModel.  The Actions do not change.

        public class Widget
        {
            public int WidgetId { get; set; }
            public string Name { get; set; }
            public string ddlTemperatureUnits { get; set; }
            public string ddlTempEnteredBy { get; set; }
        }

    Updated View and JavaScript application.

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <div style="width:50%;">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                    <th scope="col">Temperature</th>
                    <th scope="col">User</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Hello World</td>
                    <td>F</td>
                    <td>Spongebob</td>
                    <td><a id="1" class="edit" href="#">edit</a></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Foo</td>
                    <td>F</td>
                    <td>Patrick</td>
                    <td><a id="2" class="edit" href="#">edit</a></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Bar</td>
                    <td>C</td>
                    <td>Squidward</td>
                    <td><a id="3" class="edit" href="#">edit</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <hr />
    <form method="post">
        <div class="form-group">
            <input type="hidden" class="form-control" id="WidgetId" name="WidgetId" value="0" />
            <label for="WidgetName">Widget Name</label>
            <input type="text" class="form-control" id="WidgetName" name="Name" placeholder="Widget Name" />
        </div>
        <div class="form-group">
            <label for="ddlTemperatureUnits">Temperature</label>
            <select ID="ddlTemperatureUnits" name="ddlTemperatureUnits" class="form-control">
                <option value="0">--Select--</option>
                <option value="F">F</option>
                <option value="C">C</option>
            </select>
        </div>
        <div class="form-group">
            <label for="ddlTempEnteredBy">User</label>
            <select ID="ddlTempEnteredBy" name="ddlTempEnteredBy" class="form-control">
                <option value="0">--Select--</option>
                <option value="Spongebob">Spongebob</option>
                <option value="Patrick">Patrick</option>
                <option value="Squidward">Squidward</option>
            </select>
            
        </div>
        <div class="form-check">
            <input id="Save" type="submit" value="Save" />
        </div>
    </form>
    
    @section Scripts {
        <script>
            $('table tbody tr ').click(function () {
                var id = $(this).find('[scope="row"]').text();
                var name = $(this).find('td:nth-child(2)').text();
                var temp = $(this).find('td:nth-child(3)').text();
                var user = $(this).find('td:nth-child(4)').text();
                console.log(id + " : " + name);
    
                $('#WidgetId').val(id);
                $('#WidgetName').val(name);
                $('#ddlTemperatureUnits').val(temp);
                $('#ddlTempEnteredBy').val(user);
            });
    
        </script>
    }

    I'll add an example that uses your approach for comparison purposes.

    Sunday, November 18, 2018 5:14 PM
  • User1122355199 posted

    Your making assumptions of real world web applications design.  I'm simply trying to show you another way of solving the problem.  I built a base design that is easily extended.

    Again thank you.  The I am missing what you are telling me.  Is the architecture you're suggesting that all data that may be available to edit be loaded on the initial HTTP request and then use the script to populate the edit?

    Sunday, November 18, 2018 9:03 PM
  • User475983607 posted

    I am missing what you are telling me.  Is the architecture you're suggesting that all data that may be available to edit be loaded on the initial HTTP request and then use the script to populate the edit?

    Yes...

    Here's an example that loads a partial in the DOM when edit or add is clicked.

    Controller

        public class HomeController : Controller
        {
            private List<Widget> db;
            public HomeController()
            {
                db = new List<Widget>()
                {
                    new Widget()
                    {
                        WidgetId = 1,
                        Name = "Hello World",
                        ddlTemperatureUnits = "F",
                        ddlTempEnteredBy = "Spongebob"
                    },
                    new Widget()
                    {
                        WidgetId = 2,
                        Name = "foo",
                        ddlTemperatureUnits = "F",
                        ddlTempEnteredBy = "Patrick"
                    },
                    new Widget()
                    {
                        WidgetId = 3,
                        Name = "Bar",
                        ddlTemperatureUnits = "C",
                        ddlTempEnteredBy = "Squidward"
                    }
                };
            }
    
            [HttpGet]
            public ActionResult Default()
            {
                return View();
            }
    
    
            [HttpPost]
            public ActionResult DefaultUpdate(Widget vm)
            {
                return Json(vm);
            }
    
            [HttpPost]
            public ActionResult DefaultInsert(Widget vm)
            {
                return Json(vm);
            }
    
            [HttpGet]
            public ActionResult PopulateDefaultForm(int? id)
            {
                ViewBag.Temperature = new List<SelectListItem>{
                  new SelectListItem()
                  {
                      Text="--Select--",
                      Value = "0"
                  },
                  new SelectListItem()
                  {
                      Text="F",
                      Value = "F"
                  },
                  new SelectListItem()
                  {
                      Text="C",
                      Value = "C"
                  },
              };
                ViewBag.User = new List<SelectListItem>()
                {
                    new SelectListItem()
                    {
                        Text = "--Select--",
                        Value = "0"
                    },
                    new SelectListItem()
                    {
                        Text = "Spongebob",
                        Value = "Spongebob"
                    },
                    new SelectListItem()
                    {
                        Text = "Patrick",
                        Value = "Patrick"
                    },
                    new SelectListItem()
                    {
                        Text = "Squidward",
                        Value = "Squidward"
                    }
                };
    
                if (id.HasValue)
                {
                    var vm = db.Where(m => m.WidgetId == id.Value).FirstOrDefault();
                    return PartialView(vm);
                }
                else
                {
                    return PartialView();
                }
            }

    Default View

    @{
        ViewBag.Title = "Default";
    }
    
    <h2>Index</h2>
    
    <div style="width:50%;">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                    <th scope="col">Temperature</th>
                    <th scope="col">User</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Hello World</td>
                    <td>F</td>
                    <td>Spongebob</td>
                    <td><a id="1" class="edit" data-id="1" href="#">edit</a></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Foo</td>
                    <td>F</td>
                    <td>Patrick</td>
                    <td><a id="2" class="edit" data-id="2" href="#">edit</a></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Bar</td>
                    <td>C</td>
                    <td>Squidward</td>
                    <td><a id="3" class="edit" data-id="3" href="#">edit</a></td>
                </tr>
            </tbody>
        </table>
    </div>
    <hr />
    <div>
        <!-- Button trigger modal -->
        <button id="Button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Add
        </button>
    
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                
        </div>
        
        
    </div>
    @section Scripts {
        <script>
    
    
            $('.edit').click(function () {
                var id = $(this).data('id');
                $("#myModal").load("/Home/PopulateDefaultForm/" + id);
                $('#myModal').modal('show');
            });
            $('#Button1').click(function () {
                $("#myModal").load("/Home/PopulateDefaultForm");
            });
    
        </script>
    }

    Partial

    @model MvcDemo.Models.Widget
    
    @{ 
        string action = "DefaultInsert";
        if(Model != null){
            action = "DefaultUpdate";
        }
    }
    <form method="post" action="@action">
        <div class="modal-dialog" role="document">
            <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" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        @Html.HiddenFor(m => m.WidgetId)
                        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
                    </div>
                    <div class="form-group">
                        @Html.DropDownListFor(m => m.ddlTemperatureUnits, ViewBag.Temperature as List<SelectListItem>, new { @class = "form-control" })
                    </div>
                    <div class="form-group">
                        @Html.DropDownListFor(m => m.ddlTempEnteredBy, ViewBag.User as List<SelectListItem>, new { @class = "form-control" })
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" class="btn btn-primary" value="Save changes" />
                </div>
            </div>
        </div>
    </form>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 19, 2018 2:22 PM
  • User1122355199 posted

    Thanks for all of the great code.  I'm playing around with extending it now, but a few questions come to mind.  First, what if the grid doesn't display all of the columns that may need to be edited.  Now you need a database call?  Or is there some type of hidden field scheme or another solution?  Second, what if one of the columns displays as the combination of two columns, for example, 98.6 F.  I guess you would implement some type of splitting algorithm, but are you starting to lose some of the efficiencies realized through reducing HTTP calls?

    Tuesday, November 20, 2018 1:23 AM
  • User475983607 posted

    First, what if the grid doesn't display all of the columns that may need to be edited.  Now you need a database call?  Or is there some type of hidden field scheme or another solution?

    Take advantage of data- attributes or hidden fields.

    Second, what if one of the columns displays as the combination of two columns, for example, 98.6 F.  I guess you would implement some type of splitting algorithm, but are you starting to lose some of the efficiencies realized through reducing HTTP calls?

    I would take advantage of HTML so it is easy to query the DOM. 

    <span class="temp">98.6</span> <span class="unit">F</span>

    Remember you have total control over the HTML.  

    Tuesday, November 20, 2018 11:02 AM
  • User1122355199 posted

    Perfect solution.  Works really well in practice.  Thanks for all of the help.

    Thursday, November 29, 2018 1:48 AM