Harshil Shah Harshil Shah - 2 years ago 140
Javascript Question

Mvc Create button pop up need help C#.net

I am creating a Create,Edit,Delete application for simple one table.
I have

Create get method
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.


public PartialViewResult Create()
return PartialView();


public ActionResult Create([Bind(Include = "FloorFactorPercentage,FromDate,ToDate")] FloorFactor floorFactor)
if (ModelState.IsValid)
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 create
in controller class. I have added all required .css and js files i.e.
jquery.js, dialog.js,dialog.css etc.

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

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

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

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

<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" />

Answer Source

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 :

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

            var name = $('#Name').val();
            var address = $('#Address').val();
    function onsave() {

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


Thank you everyone for efforts.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download