Question

我读过这篇文章：

Change label on change DropDownListFor value

我不知道如何在我的布局中实现这一点。我在raps上用aps.net上的mvc。

这是我的_Layout.cshtml：

<!DOCTYPE html>

<html>
<head>
  <title>@ViewBag.Title</title>

  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
  <script src="@Url.Content("~/Scripts/Views/main.js")" type="text/javascript"></script>

  <script>
    $(function () {
      $('.focus :input').focus();
    });
  </script>

</head>
<body>
    <div class="page">
        <div id="header">

            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
              <ul id="menu">

                @if (User.Identity.IsAuthenticated)
                {
                  <li>@Html.ActionLink("Order Gas", "OrderGas", "Customer")</li>
                  <li>@Html.ActionLink("Make Payment", "PrePayment", "Payment")</li>
                  <li>@Html.ActionLink("Update Account", "UpdateAccount", "Account")</li>
                  @*<li>@Html.ActionLink("Change Password", "ChangePassword", "Account")</li>*@
                  <li>@Html.ActionLink("Accounts", "CustomerSummary", "Customer")</li>
                }
                else
                { 
                  <li>@Html.ActionLink("Logon", "Logon", "Account")</li>
                  <li>@Html.ActionLink("Register", "Register", "Account")</li>                  
                }

                  <li>@Html.ActionLink("ContactUs", "ContactUs", "Home")</li>
              </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
            <div style="clear: both;"></div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

显示DropDowListFor的页面我要更改值：

@model SuburbanCustPortal.Models.PaymentModel.SendToGateway

@{
    ViewBag.Title = "Make a payment!";
}

<script src="@Url.Content("~/Scripts/Views/prepayment.js")" type="text/javascript"></script>

<h2>Make a Payment</h2>

  @using (Html.BeginForm("SendPayment", "Payment", FormMethod.Post))
  {
    @Html.ValidationSummary(true, "Please correct the errors and try again.")
    <div>
      <fieldset>
        <legend>Please enter the amount of the payment below:</legend>

        <div class="editor-label">
          Please select an account.
        </div>
          @Html.DropDownListFor(x => x.AccountId, (IEnumerable<SelectListItem>)ViewBag.Accounts)

        <div class="editor-label">
          @Html.LabelFor(m => m.AccountBalance)
        </div>
        <div class="editor-field">
          <label class="sizedCustomerDataLeftLabel">$@Html.DisplayFor(model => model.AccountBalance)&nbsp;</label>
        </div>      

        <div class="editor-label">
          @Html.LabelFor(m => m.Amount)
        </div>
        <div class="editor-field focus">
          @Html.TextBoxFor(m => m.Amount, new { @class = "makePaymentText" })
          @Html.ValidationMessageFor(m => m.Amount)
        </div>

            @Html.HiddenFor(model => model.AccountId)
            @Html.HiddenFor(model => model.Branch)
            @Html.HiddenFor(model => model.AccountNumber)

        <p>
          <input id="btn" class="makePaymentInput" type="submit" value="Pay Now"  onclick="DisableSubmitButton()"/>  
        </p>
      </fieldset>
    </div>
  }

我想要发生的是当DropDownListFor发生变化时，它会使用适当的值填充金额和帐户余额字段。

这是调用PrePayment视图的控制器：

[Authorize]
public ActionResult PrePayment(PaymentModel.SendToGateway model)
{
  var custid = GetCookieInfo.CurrentAccountGuid;
  // var cust = _client.GetCustomerByCustomerId(Guid.Parse(custid));

  var list = new List<SelectListItem>();
  var custs = _client.RequestCustomersForAccount(User.Identity.Name);
  foreach (var customerData in custs)
  {
    var acctno = customerData.Branch + customerData.AccountNumber;
    var acctnoname = string.Format(" {0} - {1} ", acctno, customerData.Name);
    list.Add(new SelectListItem() { Text = acctnoname, Value = acctno });
  }

  ViewBag.Accounts = list;

  //model.AccountId = custid;
  //model.AccountNumber = cust.AccountNumber;
  //model.Amount = decimal.Parse(cust.TotalBalance).ToString("0.00");
  //model.AccountBalance = decimal.Parse(cust.TotalBalance).ToString("0.00");
  //model.Branch = cust.Branch;
  return View(model);
}

我不知道如何实现jquery来做他们发布的建议。我把它放在_Layout.cshtml中吗？另外，如何填充控制器中的值？

有人可以帮我推动正确的方向吗？

Answer 1

将 ID 添加到标签和 ddl ，如下所示。和，

您可以在ddl和label的同一页面中使用jquery。

<script> 
    $(document).ready(function(){
        $("#DropDownID").change(function () {
            $("#LabelID").text("Your text here");
        });
    });
<script>

<div class="editor-label">
     Please select an account.
</div>
     //added id
     @Html.DropDownListFor(x => x.AccountId, (IEnumerable<SelectListItem>)ViewBag.Accounts,new { id = "DropDownID" })

<div class="editor-label">
     @Html.LabelFor(m => m.AccountBalance)
</div>
<div class="editor-field">
     //added id
     <label class="sizedCustomerDataLeftLabel" id="LabelID">$@Html.DisplayFor(model => model.AccountBalance)&nbsp;</label>
</div>

评论后

<script> 
    $(document).ready(function(){
        $("#DropDownID").change(function () {
            $.ajax({
                url: '/Controller/SomeAction',
                type: 'POST',
                data: { SomeData:"SomeData" }, // for example your ddl selected value...
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                   $("#LabelID").text(data);
                },
                error: function () {
                   alert("error");
                 }
            });
        });
    });
<script>

<强>控制器

public ActionResult SomeAction(string SomeData)
{
    var result = data from your db;

    Json(result, JsonRequestBehavior.AllowGet);
}

根据我的DropDownListFor的内容更改标签的内容

1 个答案: