如何从表单中检索值并使用asp.net mvc4插入到Modal Box中

时间:2014-09-05 11:52:50

标签: jquery asp.net-mvc-4

我是asp.net mvc 4的新手。

我有一个包含一个文本框和一个预览按钮的表单(如果我单击预览按钮,则会打开一个模式框,模式框中有一个文本框)。运行应用程序后,我有将值插入文本框,之后我将点击预览按钮,文本框值应显示在模态框文本框中。

编码 index.cshtml

@{
   ViewBag.Title = "Index";
}

<h2>Index</h2>

<button id="modal-opener">preview</button>
<input type="text" name="username" />
<input type="text" name="pasw" />

<div id="dialog-modal" title=" Basic Modal Dialog">
   <p>This is test</p>
    <input type="text" name="username" />   
</div>

Homecontroller.cs

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

namespace ModalPopUp.Controllers
  {
    public class HomeController : Controller
      {
        public ActionResult Index()
         {
          return View();
         }
    }
}

_Layout.cshtml

  <!DOCTYPE html>
    <html>
      <head>
         <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
       <title>@ViewBag.Title</title>
       @Styles.Render("~/Content/css")
       <link href="~/content/themes/base/jquery-ui.css" rel="stylesheet" />
       @Scripts.Render("~/bundles/jquery")
       <script src="~/scripts/jquery-ui-1.8.24.min.js"></script>
       @Scripts.Render("~/bundles/modernizr")
      <script>
        $(function () {
           $("#dialog-modal").dialog({
                autoOpen: false,
                height: 300,
                width: 300,
                modal:true,
                show:{
                duration:100
                    },
                hide: {
                duration: 1000
                  }
             });
          $("#modal-opener").click(function () {
             $("#dialog-modal").dialog("open");
          });
       });
       </script>
     </head>
   <body>
     @RenderBody()
     @RenderSection("scripts", required: false)
  </body>
</html>

任何人都可以帮我解决这个问题吗?我将在文本框中插入应该显示在模态框文本框中的值?

1 个答案:

答案 0 :(得分:1)

使用jquery就足够了。

 var val = $("input[name='username']").val();
 $("#dialog-modal").find("input[name='username']").val(val);
 $("#dialog-modal").dialog("open");

DEMO