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

Question

问题：我想在 UI 中有一个 一个 div，我想通过 JQuery 向其中呈现一些价值，当我提交我应该能够在 后端 中访问它。

查看：

 @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"/>
        }
    }

型号：

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

控制器：

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

部分解决方案 1：

我添加了一个 div

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

在 Jquery 中，我添加了类似的东西

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

但我的问题是它没有绑定到模型，所以如何发送它到后端。

部分解决方案 2：

我可以在我的模型中创建一个属性，它将表示该 div 内容，以便它得到强绑定。这个值只是为了展示用户应该 不允许编辑它，只有它应该由 Jquery 代码呈现。我可以使用

 @Html.DisplayFor()

如下所示：

新模型：

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

新视图：

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

问题：但是现在如何使用Jquery 渲染这个属性。除了DisplayFor，我还需要使用其他东西吗？

编辑：这是DisplayFor 当前的呈现方式。

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

问题：如果我遵循解决方案 2，那么如何将类附加到 DisplayFor 元素。

Answer 1

解决方案 1

将您的操作签名更改为

public ActionResult SaveDelayedPayment(ScheduleAptMV data, int totalAmount)

但是它必须是一个 POSTable 实体，例如一个文本框，不是一个 div。所以添加一个隐藏的输入：

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

并进行相应设置：

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

---

解决方案 2

类似于解决方案 1，您只需要一个隐藏的输入，以便它可以被 POST：

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

确保它在<form> 内，它将自动绑定。使用 .DisplayFor 或您喜欢的其他方式添加显示，并使用 jquery 进行更新（如果需要），类似于上面。