How to retrieve value from a form and insert into Modal Box using asp.net mvc4

Question

I am new to asp.net mvc 4.

I have one form that contains one text box and one preview button(If I will click on the preview button then one modal box will open ,one text box is there in the modal box) .After running the application ,I have to insert value in to the textbox ,after that when I will click on preview button that text box value should display in the modal box text box.

Coding 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>

Can any one help me out to solve this problem ?The value what I will insert into the text box that should display in modal box's text box ?

Yuliam Chandra · Accepted Answer · 2014-09-05 12:01:12Z

1

Using jquery would be sufficient.

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

DEMO

answered Sep 5, 2014 at 12:01

Yuliam Chandra

14.7k12 gold badges56 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Binay Kumar Over a year ago

will you tell me one thing,if i have <label id="username"> then how i can access in jquery ?

Yuliam Chandra Over a year ago

@Cool, use # when accessing element by id $("#username")

Collectives™ on Stack Overflow

How to retrieve value from a form and insert into Modal Box using asp.net mvc4

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related