MVC + JQuery：将数据从文本字段传递到模式答案

【问题标题】：MVC + JQuery : Pass data from textfield to a modalMVC + JQuery：将数据从文本字段传递到模式
【发布时间】：2014-09-04 09:28:25
【问题描述】：

我正在尝试从引导表单传递一些用户输入的数据，并将值推送到 Visual Studio 2013 的 MVC4 项目中的模式，尝试阅读一些主题，但我很难找到一个简单的答案。

如何从我的 boostrap 表单元素中获取值并在模态中返回。我已经尝试从文档中自己将 JQuery 添加到模态中，但我在这里做错了，有人可以帮忙吗？

表单元素：

<div class="form-group">
<label class="control-label col-xs-2" for="iMei">IMEI:</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="imei" name="imei" placeholder="IMEI">
</div>
</div>

<div class="form-group">
<label for="platform" class="control-label col-xs-2">Platform:</label>
<div class="col-xs-10">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"       data-toggle="dropdown">
Select
 <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Android</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">IOS</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Windows Phone</a>    </li>
</ul>
</div>
</div>
</div>

我的模态：

<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<a href="#" class="btn btn-success"
                           data-toggle="modal"
                           data-target="#basicModal">Create New Request</a>
<button type="submit" class="btn btn-primary">Back to    List</button>
                    </div>
                </div>


<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                            <h4 class="modal-title" id="myModalLabel">Summary</h4>
                        </div>
                        <div class="modal-body">
                            <script>
                                $('#basicModel').on('show.bs.model', function (e) {
                                    var imei =
                                    $(e.relatedTarget).data('imei');
                                });
                            </script>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>

【问题讨论】：

我看不到您的表单的任何实例被包装在
元素中？就目前而言，如果您单击“保存更改”按钮，那么这个假定的表单将不会提交？我建议taking a look at this tutorial 解释如何在 ASP.NET MVC 中构造表单
嗨，Joe，有一个表单元素我只取了 2/6 个元素以避免在此处出现全长代码。
它发布到什么路径，您可以发布接收请求的控制器/操作方法吗？
我认为这可能是我缺少的一点。目前我确实有一个空白表格，而我的家庭控制器只有默认值。 public ActionResult Index() { return View(); }

标签： javascript jquery asp.net-mvc twitter-bootstrap asp.net-mvc-4

【解决方案1】：

最后我使用了以下解决方案：

jquery 发送表单数据

$("#SendRequest").click(function () {
        var imei = ("IMEI: " + $("#imei").val());
        $('#printImei').html(imei);

        var phonenumber = ("Phone Number: " + $("#phoneNumber").val());
        $('#printPhoneNumber').html(phonenumber);

        var policynumber = ("Policy Number: " + $("#policyNumber").val());
        $('#printPolicyNumber').html(policynumber);
    });

在模态体中

 <div class="modal-body">
    <span id="printImei"></span><br />
    <span id="printPhoneNumber"></span><br />
    <span id="printPolicyNumber"></span>

 </div>

【讨论】：