Question

如何在不使用模型的情况下将表单数据从数据视图传递到控制器？ .. 背后的原因是我正在尝试构建可以呈现为局部视图并提交包含的任何数据的公共引导模式。

我几乎做了所有事情，但在最后一步 [将表单提取到控制器] 我收到此错误

<块引用>

POST https://localhost:44357/Pages/Update 500

这是我的尝试

模态视图

@model Modal

<div class="modal fade" id="MessageModel" tabindex="-1" aria-labelledby="MessageModel" aria-hidden="true">
    <div class="modal-dialog">
        <diav class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">@Model.header</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="ModelForm" class="modal-body">
                <form method="post" id="ModalForm" action="@Model.SubmitFormUrl">
                    @Html.Raw(Model.body)
                </form>
            </div>
            <div class="modal-footer">
                @switch (@Model.footer)
                {
                    case fotterButtons.OneButton:
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        break;
                    case fotterButtons.TwoButtons:
                        <button type="button" onclick="submitModalForm()" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        break;
                }
            </div>
    </div>
</div>

模态模型

public class Modal
{
    // header section
    public string header { get; set; }
    public string body { get; set; }
    public fotterButtons footer { get; set; }

    public string SubmitFormUrl { get; set; }
}
public enum fotterButtons
{
    OneButton,
    TwoButtons
}

JavaScript 提交 Modal

function submitModalForm() {
var formElem = document.forms['ModalForm'];
/*var rslt = new FormData(formElem);*/

var page = new FormData(formElem);
//console.log([...page]);
fetch(formElem.getAttribute("action"), {
    method: "POST",
    //mode: 'cors',
    //cache: 'no-cache',
    //credentials: 'same-origin',
    //headers: {
    //    "Content-type":"application/json;charset=utf-8"
    //},
    body: page
}).catch (function (erro) {
    console.log(erro);
}); 
return false;
};

Modal 在视图中的使用

@{
    ViewData["saveForm"] =
    @"
    <h5 class='currentPage'></h5>
    <input type='hidden' name='Id' id='pageID' />
    <input type='hidden' name='pageHtmlContent' id='pageHtml' />

        <input type='text' name='pageName' class='form-control' />
        <textarea name='pageDescreption' class='form-control' ></textarea>
    ";
}

<partial name="_MessageBox"
            model='new Modal() {
    header = "Updating page content" ,
    body = @ViewData["saveForm"].ToString(),
    footer = fotterButtons.TwoButtons,
    SubmitFormUrl = @Url.Action("Update", "Pages")
};' />

要提交的目标ViewModel

public class VMPage
{
    public List<Page> pages { get; set; }
    public Page page { get; set; }
}

和页面的源模型看起来像

public class Page
{
    [Key]
    public Guid Id { get; set; }

    [DatabaseGenerated(DatabaseGeneratedOption.Identity)] // for auto increment
    public int Index { get; set; }

    public string pageName { get; set; }
    public string pageDescreption { get; set; }
    public string pageHtmlContent { get; set; }

}

最后是控制器的动作

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Update(FormCollection page)
    {

        //if (ModelState.IsValid)
        //{
        //    try
        //    {
        //        context.Update(page);
        //        await context.SaveChangesAsync();
        //    }
        //    catch (DbUpdateConcurrencyException)
        //    {
        //       throw;
        //    }
        //    return RedirectToAction(nameof(Index));
        //}
        return RedirectToAction(nameof(Index));
    }

注意：Modal 视图是使用 Modal 强类型化的，而不是使用 Page。我需要通过渲染来使用这个视图，使用部分标签助手，在我的应用程序中的任何地方提交任何模型“页面作为示例”。

另一个注意事项：当我尝试获取 formdata 值时，它又回来了

var page = new FormData(formElem);  
console.log([...page]);

<块引用>

0: (2) ["Id", "f1d7afc6-14a8-4b85-a1dd-02ec1ae9a1f8"]
1: (2) ["pageHtmlContent", ""]
2: (2) ["pageName", "fffffffffffffffffff"]
3: (2) ["pageDescreption", "vvvvvvvvvvvvvvvvvvvvv"]

但我不确定使用 FormCollection page

接收表单数据是否正确

如何在不使用特定模型的情况下将表单 FormData 从视图传递到控制器？

0 个答案: