jquery - 如何使用 asp.net mvc 4 和 jquery 从一个表中获取值并将其放入另一个表中

Question

我是新的 asp .net mvc 4。

我有一张表格，上面有姓名、职务、数量和手机号码，还有一个提交按钮和一个按钮。

首先，我必须填写表格，然后当我点击提交按钮时，它将存储在数据库中，当我点击预览按钮时，无论我在所有字段中插入什么数据，它都会显示在另一个表格中。

Facilities.cshtml

@using (Html.BeginForm("Facilities", "OfficialInformation", FormMethod.Post, new { enctype = "multipart/form-data" }))
 {
        <table class="grid" border="1" cellspacing="0" cellpadding="0">
            <tr class="gridAlternateRow">
                <td>
                    <span style="color:red;">*</span>&nbsp;Name
                </td>
                <td colspan="4">
                    <div class="row">
                        @*@Html.TextBoxFor(m=>m.txtfirstName)*@
                        @*@Html.DisplayFor(m => m.txtfirstName)*@
                        @Html.TextBox("empname", (string)ViewBag.empname, new { @readonly = "readonly" })
              </div>
            </td>           
         </tr>

         <tr>
                <td>
                    Role Designation As Per HR Record
                </td>
                <td colspan="4">
                    <div class="row">
                        @*@Html.TextBoxFor(m=>m.txtDesignation)*@
                        @Html.TextBox("empDesignation", (string)ViewBag.empDesignation, new {@readonly="readonly" })
                    </div>
                </td> 
            </tr>
          <tr>
             <td>
                    <span style="color:#FF0000;">*</span>Mobile
                </td>
                <td>
                    <div class="row">
                        @Html.TextBoxFor(m=>m.intMobile)
                        <span style="color:red"> @Html.ValidationMessageFor(m => m.intMobile)</span>
                   </div>
                </td>
            </tr>



    <tr class="gridAlternateRow">
                <td><span style="color:#FF0000;">*</span>Quantity</td>
                <td colspan="3">
                    <div class="row">
                        @Html.TextBoxFor(m => m.intQuantity)
                        <span style="color:red">@Html.ValidationMessageFor(m => m.intQuantity)</span>
                    </div>
                </td>
            </tr>

   <input type="submit" value="Save" class="btnPrimary">
            <input type="reset" value="Reset" class="btnPrimary">

  <div id="previewtop">
     <input type="button" value="Preview" class="btnPrimary" id="previewtop1"/>
   </div> 
  <div id="previewdisplay">
    <table class="grid">
        <tr>
            <td>
                Name:@Html.DisplayFor(m=>m.txtFirstName)
            </td>
        </tr>
        <tr>
            <td>
                @Html.DisplayFor(m=>m.txtDesignation)
            </td>
        </tr>
        <tr>
            <td>
                @Html.DisplayFor(m=>m.intQuantity)
            </td>
        </tr>
        <tr>
            <td>
                Mobile:@Html.DisplayFor(m=>m.intMobile)
            </td>
        </tr>
    </table>
</div>

Controller.cs

[HttpGet]
    public ActionResult Facilities()
    {
        int EmpId = 10002;

        ViewBag.LocationList = new SelectList(db.mstLocationDetails, "intLocationId", "txtLocationName");
        ViewBag.SubLocationlist = new SelectList(db.mstSubLocations, "intSubLocationId", "txtSubLocationName");
        ViewBag.Deaprtmentlist = new SelectList(db.mstDepartmentLists, "intDeptartmentId", "txtDepartmentName");
        ViewBag.BoardNumber = new SelectList(db.mstBoardNumberDetails, "intBoardNumberId", "intBoardNumber");
        ViewBag.FaxNumber = new SelectList(db.mstBoardNumberDetails, "intBoardNumberId", "intFaxNumber");
        ViewBag.Officeaddress = new SelectList(db.mstBoardNumberDetails,"intBoardNumberId","txtOfficeAddress");

        mstEmpDetail emp = new mstEmpDetail();
        ViewBag.managerid = new SelectList(db.mstManagers, "txtEmpMagerEmail", "txtEmpMagerEmail");
        var emp2 = db.mstEmpDetails.Count(x => x.intEmpId == EmpId);
        if (emp2 > 0)
        {
            emp = db.mstEmpDetails.Single(x => x.intEmpId == EmpId);
            ViewBag.empname = emp.txtEmpFirstName;
           }
        var empdg = db.mstDesignationDetails.Single(x => x.intEmpId == EmpId);
        ViewBag.empDesignation = empdg.txtDesignationName;     
        return View();
    }


 [HttpPost]
    public ActionResult Facilities(TrnBusinessCardDetail1s bc)
    {
       db.TrnBusinessCardDetail1s.Add(bc);
            db.SaveChanges();
            Session["sg"] = "Your Request has been sent Successfully.";
            return RedirectToAction("Facilities");     
    }

jQuery

@Scripts.Render("~/bundles/jquery")
<script>
$(document).ready(function () {

    $('#previewtop').click (function() {
        $('#previewdisplay').show();
    });
});

CSS

<style>
   #previewdisplay
   {
      display:none;
  }
</style>

Can any one tell me how to retrieve the value of the text box whatever I inserted that should
display in the preview button table while clicking on preview button.

运行应用程序后，当我单击预览按钮时，它无法从相同的表单中检索值？

Answer 1

您需要使用 jquery 从文本框中获取值，例如这个

@Html.TextBoxFor(m=>m.txtfirstName) 

可以使用 id txtfirstName 访问此文本框值，如下所示:

$('#txtfirstName').val(); 

然后您需要将此值附加到您的标签中，使用 jquery .html() 方法显示它 将您的 jquery 更改为此

    $('#previewtop').click (function(){
    $('#previewdisplay').show();
    var fname= $('#txtfirstName').val();
    $('.myInput').html(fname);
    });

并在 cshtml 中添加一个 span 并使用 labelfor 而不是 displayfor

@Html.LabelFor(model => model.txtfirstName)
<span class="myInput"></span>

这是 jsfiddle jsfiddle.net/mopa7xq1/