CODEWITHSUNDEEP
c#asp.net-mvc-3razor
ErocM
ErocM

Reputation: 4662

Change content of label based on the contents of my DropDownListFor

I read this post:

Change label on change DropDownListFor value

And I have no idea how to implement this in my layout. I am using mvc on aps.net with razor.

This is my _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>

And the page that is displaying the DropDowListFor where I want to change the values:

@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">[email protected](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>
  }

What I want to happen is when the DropDownListFor changes, it populates the amount and accountbalance fields with the appropriate values.

This is the controller that is calling the PrePayment view:

[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);
}

I have no idea how to implement the jquery to do what they posts suggests. Do I put that in the _Layout.cshtml? Also, how do I populate the values from the controller?

Can someone give me a push in the right direction?

Upvotes: 0

Views: 2272

Answers (1)

AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

Add id to label and ddl like below. And,

You can use the jquery in the same page with ddl and label.

<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">[email protected](model => model.AccountBalance)&nbsp;</label>
</div>

AFTER COMMENT

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

Controller

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

    Json(result, JsonRequestBehavior.AllowGet);
}

Upvotes: 4

Related Questions