在 partialView (MVC) 中查找 class 并将变量传递给函数

Question

我正在使用 .Net Core 编写网页，我最近开始在我的网页中使用 jQuery。

`<div id="details"></div>`

中显示的局部视图

@model Program.Models.Device

<dl>
    <dt>
        @Html.DisplayNameFor(model => model.Alias)
    </dt>
    <dd>
        @Html.DisplayFor(model => model.Alias)
    </dd>
    <dt>
        @Html.DisplayNameFor(model => model.Log)
    </dt>
    <dd>
        <a data-toggle="modal" data-target="#logData">Open</a>

        <div class="modal fade" id="logData" tabindex="-1" role="dialog" aria-labelledby="logDataLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Log for @Html.DisplayFor(model => model.Alias)</h4>
                    </div>
                    <div class="modal-body">
                        @Html.TextAreaFor(m => m.Log, htmlAttributes: new { @class = "form-control", @id = "logTextArea", @placeholder = "Log is empty" })
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        @*This will be used to find the deviceID*@
                        @Html.HiddenFor(m => m.DeviceID, new { @class = "deviceID" }) 
                        <button type="button" class="btn btn-primary" id="save">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </dd>
</dl>

为了大致了解我将使用模式的内容，它用于从我的一个称为设备的模型更新日志。 textarea 将保存设备的日志并且按预期工作。但是我想写一个 JavaScript/jQuery 函数，它从文本区域获取文本并将其传递给我的控制器中的一个函数：

.CS函数

public void UpdateLog(int id, string logText)
{
    Device device = new Device { DeviceID = id, Log = logText };

    _context.Devices.Attach(device);
    _context.Entry(device).Property(x => x.Log).IsModified = true;
    _context.SaveChanges();
}

JQuery点击代码

$('#details').on('click', '#save', function () {
    var text = $("#logTextArea").val();
    var id = $(this).siblings('deviceID').val(); //Getting deviceID
    //Running C# method somehow?
});

我怎样才能以最好的方式获得 DeviceID？编辑：见模态代码和jQuery

此外，我发现运行我的控制器函数需要一个 @Url.Action('<function name>', '<controller name>') 但是如何将变量传递给这样的函数，因为我现在将拥有所需的日志和 ID功能？

编辑：

代码现在进行了一些更改，我现在正在获取设备 ID（之前对车辆 ID 有误解）。我唯一的问题是如何运行 .CS 函数并在我的 jQuery 单击代码中将两个参数传递给我的 .CS 函数。

谢谢！

Answer 1

你可以这样ajax打电话：

var data={
    logText:text,
    id :id
    };

    $.post('ControllerName/UpdateLog',data)
    .done(function(data){
    //When success return logic
    }).fail(function(xhr){
    //if request failed
    });

Answer 2

您需要对 post 该数据进行 ajax 调用（假设您希望留在同一页面）。

您应该首先将表单控件包装在 <form> 标记内并添加 @Html.ValidationMessageFor(m => m.Log) 并将按钮更改为 type="submit" 以便您获得（并可以检查）客户端验证在 post 处理数据之前。

<div class="modal-dialog" role="document">
    <div class="modal-content">
        ...
        <form>
            <div class="modal-body">
                @Html.HiddenFor(m => m.DeviceID)
                @Html.TextAreaFor(m => m.Log, htmlAttributes: new { @class = "form-control",     @placeholder = "Log is empty" })
                @Html.ValidationMessageFor(m => m.Log)
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </form>
    </div>
</div>

那么脚本就是

var url = '@Url.Action("UpdateLog")'; // assumes its the same controller that generated the view
$('#details').on('submit', 'form', function () { // handle to forms submit() event
    if (!$(this).valid()) {
        return; // cancel (the validation message will be displayed)
    }
    var data = $(this).serialize()
    $.post(url, data, function(response) {
        // do something with the response
    })
    return false; // cancel the default submit
});

您的 POST 方法将是 public ActionResult UpdateLog(int id, string log)，但是要捕获服务器端验证，您应该创建一个装饰有必要验证属性的视图模型

public class DeviceLogVM
{
    public int ID { get; set; }
    [Required(ErrorMessage = "..")] // add StringLength etc as needed
    public string Log { get; set; }
}

这样方法就变成了

public ActionResult UpdateLog(DeviceLogVM model)

以便您可以在保存前检查ModelState是否无效。另请注意，该方法应该是 ActionResult 以便您可以 return 向客户端返回指示成功或其他情况的内容。

在 partialView (MVC) 中查找 class 并将变量传递给函数

Finding a class in a partialView (MVC) and passing variables to a function

javascript

c#

asp.net-mvc

jquery

.net-core

`<div id="details"></div>`

.CS函数

JQuery点击代码

编辑：