0

Question: I want to have one div in UI and I want to render some value into it via JQuery and when I submit the form I should be able to access it in the backend.

View: 

 @model ScheduleAptMV
        using (Html.BeginForm())
        {
           ////// I want a div here /////
            @Html.LabelFor(model => model.FirstName })
            @Html.EditorFor(model => model.FirstName)
            <input type="submit" value="Make Appointment"/>
        }
    }

Model:

public class ScheduleAptMV
{
    public string FirstName {get; set;}
}

Controller:

    [HttpPost]
    public ActionResult SaveDelayedPayment(ScheduleAptMV data)
    {
         // I want to be able to access the Div text too
    }

Partial Solution 1:

I added a div

  <div id="totalAmount"></div>

And with Jquery I added something like

$("#totalAmount").text("HelloFoo");

But my problem is it is not tied to the model, so how to send it to the backend.

Partial Solution 2:

I can create a property in my model which will represent that div content so that it gets Strongly Bound. This value is just for display user should not be allowed to edit it, only it should by rendered by Jquery code. I can use

 @Html.DisplayFor()

Something like below:

New Model:

public class ScheduleAptMV
{
    public string FirstName {get; set;}
    public decimal totalAmount{get; set;}
}

New View:

<span class="myClass">
    @Html.DisplayFor(model => model.totalAmount)
</span>

Question: But now how to render this property using Jquery. Do I need to use something else apart from DisplayFor.

Edit: This is how the DisplayFor renders currently.

  <span class="myClass">
    0.00
        </span>

Question: If I follow soution 2 then how to attach a class to DisplayFor Element.

Unbreakable
  • 7,776
  • 24
  • 90
  • 171

1 Answers1

1

Solution 1

Change your action signature to 

public ActionResult SaveDelayedPayment(ScheduleAptMV data, int totalAmount)

however it must be a POSTable entity, eg a textbox, not a div. So add a hidden input: 

<input type='hidden' name='totalAmount' id='totalAmount'/>
<div id='totalAmountDisplay'></div>

and set accordingly:

 $("#totalAmountDisplay").text("1024");
 $("#totalAmount").val(1024);

Solution 2

Similar to solution 1, you just need a hidden input so that it can be POSTed:

@Html.HiddenFor(m => m.totalAmount)

ensure that's within the <form> and it will be bound automatically. Add the display using .DisplayFor or however else you like and jquery to update (if required) similar to above.

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
  • Suppose I want to follow solution 2nd, then my doubt is, how to change its value in frontend using Jquery. I don't think I can add a class to `DisplayFor` helper. – Unbreakable Apr 17 '18 at 16:42
  • 1
    I understood the hiddenFor part. Now I want to understand how to adjust the value using Jquery. – Unbreakable Apr 17 '18 at 16:43
  • https://stackoverflow.com/questions/33546963/applying-css-class-using-html-displayfor-inside-razor-view Kindly see this example. It just renders a text and class does not get attached to it. – Unbreakable Apr 17 '18 at 16:52
  • If you look at the rendered html, `@Html.HiddenFor(m=>m.totalAmount)` will be rendered as `` so you just use `$("#totalAmount").val(123);` – freedomn-m Apr 17 '18 at 18:26
  • As it's hidden, if you want to see it, you also need to change the display version, as per the solution 1 solution. – freedomn-m Apr 17 '18 at 18:26
  • Perfect then I think I will not use DisplayFor then. I wil simply use a bare div element and display the value using jquery as mentioned in solution 1 and as far as sending strongly typed value is concerned I will use the `HiddenFor`. I hope I am making sense. (So, no need to use DisplayFor). – Unbreakable Apr 17 '18 at 18:29