Mvc Create button pop up need help C#.net

Question

I am creating a Create,Edit,Delete application for simple one table. I have Create get method and create post method views ready as i created my project using entity framework.

now in my current application it is opening a new page to create new data and what i want is to open a pop up in which I add required fields and than when I click on ADD it will add those data in database.

FloorFactorsController.cs

public PartialViewResult Create()
{
    return PartialView();
}

[HttpPost]
[ValidateAntiForgeryToken]

public ActionResult Create([Bind(Include = "FloorFactorPercentage,FromDate,ToDate")] FloorFactor floorFactor)
{
    if (ModelState.IsValid)
    {
        db.FloorFactors.Add(floorFactor);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(floorFactor);
}

Index view.cshtml required part of full code.`

Here, I have add ajax.actionlink for adding an CREATE NEW link which redirect to my get method createin controller class. I have added all required .css and js files i.e. jquery.js, dialog.js,dialog.css etc.

<p>
   @Ajax.ActionLink("Create New", "Create", new AjaxOptions { HttpMethod = "Get" ,UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess = "openPopup" }) <br />
</p>

<div id="result" style="display:none;">
    <button type="button">success</button>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#result").dialog({
        autoOpen: false,
        title: 'Title',
        width: 500,
        height: 'auto',
        modal: true
    });
});
function openPopup() {
    $("#result").dialog("open");
}
</script>
`

It Gives error

Object doesn't support property or method 'dialog'

I don't know what to do i have referred this QUESTION but this is not working for me.

EDIT _layout.cshtml File

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>

<script type="text/javascript" src="~/Content/jquery-2.2.3.js"></script>
<link type="text/css" href="~/Content/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="~/Content/jquery-ui.js"></script>
<script src="~/Content/dialog.js"></script>
<link href="~/Content/dialog.css" rel="stylesheet" />

I am new to ajax can you please tell me how can i make sure that ? and i can't see any output at this time as it is showing me exception at run time. — Harshil Shah, May 20 '16 at 08:52
ok no issues, please check it using developer tools by adding a debugger at the `$("#result").dialog("open");` line and check the result div when the debugger hits..:) — SamGhatak, May 20 '16 at 08:59
it is not showing any value for div. it shows only **this** & **arguments** in locale box. — Harshil Shah, May 20 '16 at 09:28
try doing this to debug:`function openPopup() { alert($("#result").html()); }` — SamGhatak, May 20 '16 at 09:32
yea i also put a breakpoint on ajax link it executes it and than jump directly on function resides in document.ready field. i think it skips div block. Is there any other way to put pop up window where i can put create functionality ? — Harshil Shah, May 20 '16 at 09:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112490/discussion-between-harshil-shah-and-samghatak). — Harshil Shah, May 20 '16 at 09:36
@Chintan with your comment i just changed my browser and it dosn't show that error anymore... but still can't see pop up as i expact. It shows View of my create method — Harshil Shah, May 20 '16 at 11:57

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

Sorry, I can't add a comment because my reputation lower than 50. Did you ever read this: Object doesn't support property or method 'dialog' ? I think that you didn't include jquery file properly.

edited May 23 '17 at 10:28

Community

1
1

answered May 20 '16 at 09:07

AirNoir

251
1
2
15

yea i checked it just now. Checked all three options but still it is not working. well can you explain what is hardcore urls ? my code does't have @script.render so thats also not the issue. – Harshil Shah May 20 '16 at 09:18
Thats not an issue @AirNoir , In that case the the `$(document)` would show `$ is not defined` – SamGhatak May 20 '16 at 09:30
@SamGhatak, In that post, the author has metioned "I checked both in IE and Firefox. Firefox throws "Typeerror $(...).dialog is not a function" and IE throws Object doesn't support property or method 'dialog'. " , so I thought Harshi Shah might encounter the same problem. – AirNoir May 20 '16 at 11:34
If you see that post, the user had the issue even after he added a reference to the jQuery library. Did you try using this code without the jQuery library and see if you get similar error? Both the error messages you shown has the issue with `.dialog()` , so it identifies the `$()` meaning it understands jQuery....thus the library is included – SamGhatak May 20 '16 at 11:40
Harshil, he means that don't use in your Layout. You should use "@script.render" helper to include the script. By the way, try to put your script section inside the header. – AirNoir May 20 '16 at 11:41

score 0 · Answer 2 · answered May 20 '16 at 12:04

0

My guess is that you're importing a CDN or downloaded version of jQuery UI that doesn't include the dialog widget.

To test this theory, replace the script reference for jQuery UI with the following:

<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

I have other questions about what you're actually trying to achieve here, since your controller has ActionResult methods instead of JsonResult and why you're GETting a request to a method that is decorated with [HttpPost], but that's not what you're asking about in this question.

answered May 20 '16 at 12:04

Phil.Wheeler

16,748
10
99
155

Thanks for answer @Phil. Actually i have both Get & post method for create. First i need to show a pop up form to get data from user and than with post request i will store those data in database. Thats why i am using Get request just to display Pop up form. i will use my post method on submit button. Now i changed my browser and that dialog error is not coming anymore so do you know it is browser dependent or not ? dialog is working fine in Crome but not in IE. – Harshil Shah May 20 '16 at 12:10
The dialog shouldn't be browser dependent but the versions of jQuery that are supported by older versions of IE will matter. Might help if you posted the code where you have your script references into your original post. – Phil.Wheeler May 20 '16 at 12:41

score 0 · Accepted Answer · edited May 23 '17 at 11:44

Well after so much surfing on new i found few useful links and got solution to my question.

In order to use jquery-ui files i required to put those files in @Scripts.render(""); as it is best practice to add all script and style files in it for better performance.

I was unable to add @Script & @Styles in my project. It was giving me error that it is not in the context. so this Question solved my that problem. than i just pasted link in it and my dialog start working fine. still i am trying to open dialog box using ajax but i did open dialog box using javascript.

Code to open pop up with javascript :

    <div>
        <input type="text" id="Name" />
        <input type="text" id="Address" />
        <button onclick="OpenDialog()">
            Open Dialog</button>
    </div>
<div id="Dialog-Box">
        <input type="text" id="Dialog-Name" />
        <input type="text" id="Dialog-Address" />
        <input type="submit" onclick="onsave()" value="save" />
    </div>
    <script>
    $('#Dialog-Box').dialog({
            autoOpen: false,
            height: 500,
            width: 700,
            modal: false
        });
    function OpenDialog() {

            var name = $('#Name').val();
            var address = $('#Address').val();
            $('#Dialog-Name').val(name);
            $('#Dialog-Address').val(address);
            $('#Dialog-Box').dialog('open');
        }
    function onsave() {

            $.ajax({
                url: '@Url.Action("ActionName", "ControllerName")',
                type: 'POST',
                data: {
                    name: $('#Dialog-Name').val(),
                    address: $('#Dialog-Address').val()
                },
                success: function (msg) {
                },
                error: function (msg) {
                }
            });

        }
    </script>

Thank you everyone for efforts.

Must visit that link on QUESTION which i attached in order to solve `Object doesn't support property or method 'dialog' error` — Harshil Shah, May 23 '16 at 07:16

Mvc Create button pop up need help C#.net

3 Answers3