Modal form to edit row in a grid (ASP.NET MVC)

Question

For many days I've been trying unsuccessfully to implement Modal dialog editing in a flexigrid.

I started with a very simple example:

http://mvc4beginner.com/Sample-Code/Insert-Update-Delete/Asp-.Net-MVC-Ajax-Insert-Update-Delete-Using-Flexigrid.html

I expanded this example a lot, but I hit a road block and I don't know how to achieve desired functionality.

I implemented the following jquery function:

    function RunModalDialog(title, url)
    {
        $("#sform").dialog({
            autoOpen: false,
            show: "blind",
            closeOnEscape: true,
            resizable: true,
            width: 1200,
            height: 750,
            minHeight: 600,
            minWidth:950
        });
        if (title)
            $("#sform").dialog("option", "title", title);

        if (url)
            $("#sform").load(url).dialog("open");
        else
          $("#sform").dialog("open");

And I am calling it from Add button (without url) and from the Edit button (with a url).

It works OK for the Add (although I haven't yet implemented actual save and grid refresh), but I can not make it work on Edit.

Here is my main view code

@model CardNumbers.Objects.Client

@{
    ViewBag.Title = "Clients";
}

@section scripts {
    <script src="@Url.Content("~/Scripts/Clients.js")" type="text/javascript" ></script>
}

<form id="frmClientsSearch">
    <label for="clientNo">Client No: </label>
    <input type="number" name="searchClientNo" class="numericOnly" /><br />
    <label for="clientName">Client Name: </label>
    <input type="text" size="25" value="Please enter the search value" class="SelectOnEntry"
        name="searchClientName" />

    <input type="button" id="btnClientsSearch" value="Find / Refresh" />
</form>
<div style="padding-left: 150px; padding-top: 50px; padding-bottom: 50px;" id="ClientsResults">
    <table id="flexClients" style="display: none">
    </table>
</div>

<div id="editor" style ="visibility :hidden ">
      @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "sform", title = "Client Info" }))
     { 
        @Html.Partial("_ClientForm", Model)   
      }      
</div>

And the Edit method of the client controller returns a view which is


    @model CardNumbers.Objects.Client

    @{
        ViewBag.Title = "Edit Client";
        Layout = "~/Views/Shared/_PopupLayout.cshtml";
    }

    @Html.Partial("_ClientForm", Model)

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        
    }

I originally had the BeginForm inside the _ClientForm and I could see the form, but the x (close) and Resize didn't work. I now tried moving the line that starts the form outside, but now the behavior is even worse.

Can you tell me how this is supposed to work?

When you do the edit, is the content from the URL loaded into #sform? Kinda need to tell where you are having trouble — Andy T, Dec 21 '12 at 00:28
I am going to add more content into my question to provide my main view code and the Edit method of the controller. Please check my question again in a few minutes — Naomi, Dec 21 '12 at 00:44

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Two things I can think of doing is

Check that the URL is valid,
Call dialog once the div has been filled up

$("#sform").load(url).dialog("open");

becomes

    $("#sform").load(url, function(){
       $("#sform").dialog("open");
    });

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed.

NOTE THIS WAS A PROPOSED ANSWER TO THE QUESTION BEFORE IT WAS MODIFIED

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 21 '12 at 00:28

heads5150

7,263
3
26
34

I think being a beginner I still don't exactly understand how all of this is supposed to work. I wish I can insert a picture with the error I got when I changed my code using your suggestions – Naomi Dec 21 '12 at 00:42
The error is now Unhandled exception at line 2, column 13143 in http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js 0x800a139e - Microsoft JScript runtime error: cannot call methods on dialog prior to initialization; attempted to call method 'open' – Naomi Dec 21 '12 at 00:43
THat tells me that #sform doesn't exist when the script is run. Either wrap in a $(document).ready or move script below #sform – heads5150 Dec 21 '12 at 00:45
#sForm is in the main view. Should it be also in the Edit view? I have at the bottom of the Client view
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "sform", title = "Client Info" })) { @Html.Partial("_ClientForm", Model) }
– Naomi Dec 21 '12 at 00:59
I also added more content as what I have right now. I have a main view where I defined the #sForm (in the invisible div). In the Edit button I try to return a view. If I return a view containing #sForm, it doesn't seem to work at all. But I am thinking - may be I just need to wrap it in the form statement (but without id)? – Naomi Dec 21 '12 at 01:02
Ok, I made partial success. I am now able to show the dialog correctly with the Edit and the little close button in the corner works. However, when the dialog closes, I seem to return to the original page, the grid doubles itself and the aa I put in the search box is gone. – Naomi Dec 21 '12 at 01:43
You're getting there then. Sounds like my answer has put you on the right track – heads5150 Dec 21 '12 at 01:48
It did, but now I am facing a different problem. Now after I close that Edit dialog, the first view seems to revert to original (the text is the same as when I invoke it initially) and the grid shows doubled. I added pictures of what I see now in this thread on jquery forum https://forum.jquery.com/topic/how-can-i-define-dialog-once-and-use-it-in-add-and-edit-methods#14737000003745909 – Naomi Dec 21 '12 at 01:56
I just found this post http://stackoverflow.com/questions/1516674/how-to-use-a-jquery-ui-modal-form-from-asp-net-mvc-list-page?rq=1 which sounds exactly like I want to implement. My question is - what is data in this case? In other words, is there a way to return just the model data (as JSON if needed) instead of returning the whole view which seems to mess up my first page? I wish I have a way to add comments in existing threads – Naomi Dec 21 '12 at 15:25

Modal form to edit row in a grid (ASP.NET MVC)

1 Answers1