0

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

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

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));
    }

注意：模态视图是强类型的模态，而不是页面。我需要通过在我的应用程序中的任何位置使用部分标记帮助程序渲染它来使用此视图，以提交任何模型“页面作为示例”。

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

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

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

但我不确定使用接收表单数据是否正确FormCollection page

4

0 回答 0