如何将不属于模型的div值传递给后端控制器方法

Question

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.

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