C# Online Compiler | .NET Fiddle

Model

​x
 
​

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>JQuery Dialog Demo</title>
    <link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/vader/jquery-ui.css" rel="stylesheet" />
</head>
<body>
    <div>
        @using (Ajax.BeginForm(actionName: "GetFakeData", ajaxOptions: new AjaxOptions
        {
            HttpMethod = "Post",
            OnSuccess = "GetFakeDataSuccess"
        }))
        {
            <label>AjaxHelper版本查詢</label>
            <input type="text" name="name" value="ITWeiHan" />
            <input type="submit" value="查詢" />
        }
        <hr />
        <div id="formID">
            <label>JQueryAjax版本查詢</label>
            <input type="text" name="name" value="ITWeiHan" />
            <button>查詢</button>
        </div>
        
    </div>
    <div id="dialog" title="Dialog視窗"></div>


    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.unobtrusive-ajax/3.2.5/jquery.unobtrusive-ajax.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        function GetFakeDataSuccess(obj) {
            var dialog = $("#dialog");
            console.log(obj);
            dialog.html(`名字 : ${obj.Name}`);
            dialog.dialog();
        }

        $('button').on('click', function () {
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetFakeData", "Home")',
                data: $("#formID").find('select, textarea, input').serialize(), /*假如想要在Div像Form序列化，可以使用find input*/
                dataType: "json",
                success: function (obj) { GetFakeDataSuccess(obj); },
                error: function (e) { console.log(e); }
            });
        })
    </script>

</body>
</html>

View

 
@{
    Layout = null;
}
​
<!DOCTYPE html>
​
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>JQuery Dialog Demo</title>
    <link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/vader/jquery-ui.css" rel="stylesheet" />
</head>
<body>
    <div>
        @using (Ajax.BeginForm(actionName: "GetFakeData", ajaxOptions: new AjaxOptions
        {
            HttpMethod = "Post",
            OnSuccess = "GetFakeDataSuccess"
        }))
        {
            <label>AjaxHelper版本查詢</label>
            <input type="text" name="name" value="ITWeiHan" />
            <input type="submit" value="查詢" />
        }
        <hr />
        <div id="formID">
            <label>JQueryAjax版本查詢</label>
            <input type="text" name="name" value="ITWeiHan" />
            <button>查詢</button>
        </div>
        
    </div>
    <div id="dialog" title="Dialog視窗"></div>
​
​
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.unobtrusive-ajax/3.2.5/jquery.unobtrusive-ajax.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        function GetFakeDataSuccess(obj) {
            var dialog = $("#dialog");
            console.log(obj);
            dialog.html(`名字 : ${obj.Name}`);
            dialog.dialog();
        }
​
        $('button').on('click', function () {
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetFakeData", "Home")',
                data: $("#formID").find('select, textarea, input').serialize(), /*假如想要在Div像Form序列化，可以使用find input*/
                dataType: "json",
                success: function (obj) { GetFakeDataSuccess(obj); },
                error: function (e) { console.log(e); }
            });
        })
    </script>
​
</body>
</html>
​

using System.Collections.Generic;
using System.Web.Mvc;

namespace AjaxJqueryDialog.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult GetFakeData(string name)
        {
            return Json(
                new Dictionary<string, string>
                {
                    {"Name",name }
                }
            );
        }
    }


}

Controller

 
using System.Collections.Generic;
using System.Web.Mvc;
​
namespace AjaxJqueryDialog.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }
​
        [HttpPost]
        public ActionResult GetFakeData(string name)
        {
            return Json(
                new Dictionary<string, string>
                {
                    {"Name",name }
                }
            );
        }
    }
​
​
}

View in Full Screen

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
|C|O|M|P|U|T|E|R| |S|C|I|E|N|C|E|
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-

Last Run:	9:03:33 pm
Compile:	0.204s
Execute:	0.017s
Memory:	8kb
CPU:	0.016s

View IL Code