如何将不属于模型的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 Element。

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相似，您只需要一个隐藏的输入即可将其发布：

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

确保在<form> ，并且它将被自动绑定。 使用.DisplayFor添加显示，或者使用其他类似的方法和jquery进行更新（如果需要），类似于上述。