Javascript 从razor视图向控制器操作提交值，该控制器操作通过HTTP Post方法接受值

我的一个控制器中有一个视图，其中包含项目列表。当用户单击每个项目时，浏览器必须导航到显示该项目详细信息的页面

详细信息的控制器

通过post方法接受值，并将复杂的输入对象作为其输入

下面是使用

GET

方法发送值导航到详细信息页面的示例方法：

function openDetailsPage(commodityID, commodityName) {

     dateFrom = convertNumbers2English('@(((FilterViewModel)ViewBag.ViewModel).dateValue_1)');
    dateTo = convertNumbers2English('@(((FilterViewModel)ViewBag.ViewModel).dateValue_2)');

    dateFrom = changeDateSeparator(dateFrom);
    dateTo = changeDateSeparator(dateTo);

    if (dateTo == null || dateTo == undefined)
        dateTo = "0";

    if (dateFrom == null || dateFrom == undefined)
        dateFrom = "0";
    @{
        string reportTypes = "0";
        if (((FilterViewModel)ViewBag.ViewModel).purchaseReportTypes != null)
        {
            reportTypes = String.Join(",", ((FilterViewModel)ViewBag.ViewModel).purchaseReportTypes);
        }
    }
    alert('@reportTypes');
    var url = '@Url.Action("ReportDetailed","BuyReport",new {
        commodityType =(((FilterViewModel)ViewBag.ViewModel).commodityType),
        commodityName="dummyCommodityName",
        department=((FilterViewModel)ViewBag.ViewModel).department,
        repository=((FilterViewModel)ViewBag.ViewModel).repository,
        commodity ="dummyCommodityID",
        purchaseReportTypes=reportTypes,
        dateValue_1="dummyDate1",
        dateValue_2="dummyDate2"
    })';
    alert(url);

    @*var url = '@Url.Action("ReportDetailed","BuyReport",
    new RouteValueDictionary
    {
        {"commodityType",((FilterViewModel)ViewBag.ViewModel).commodityType},
        {"commodityName","dummyCommodityName" },
        {"department",((FilterViewModel)ViewBag.ViewModel).department },
        {"repository",((FilterViewModel)ViewBag.ViewModel).repository },
        {"commodity","dummyCommodityID"},
        {"purchaseReportTypes",((FilterViewModel)ViewBag.ViewModel).purchaseReportTypes },
        {"dateValue_1",((FilterViewModel)ViewBag.ViewModel).dateValue_1 },
        { "dateValue_2",((FilterViewModel)ViewBag.ViewModel).dateValue_2 }

    })';*@
    url = url.replace("dummyCommodityID", commodityID);
    url = url.replace("dummyCommodityName", commodityName);
    url = url.replace("dummyDate1", dateFrom);
    url = url.replace("dummyDate2", dateTo);
    alert(url);
    openLink(url);
}

我对这种类型的值路由有一些困难：

输入对象很复杂，所以路由会很复杂。例如，

/BuyReport/ReportDetailed？commodityType=0&；commodityName=DummycomodityName&；部门=1&；存储库=2&；商品=dummyCommodityID&；dateValue_1=dummyDate1&；dateValue_2=dummyDate2

或

/BuyReport/ReportDetailed/0/itemName/1/2/1/123/

get参数中的任何特殊字符（如

/

）都将中断路由

我无法传递数组之类的内容，因此我应该在发送之前转换它们

因此，我正在寻找一种使用“Post”方法发送参数的方法，就像表单提交按钮在以下约束条件下所做的那样：

我认为没有表格

我想将值发布到控制器，页面必须导航到详细信息视图

第一页中的每一项都有不同的行和不同的ID，所以我认为为每一行创建表单是不合理的

我想知道有没有办法根据我的要求实现

Post

参数？我不在乎它是否是C#、JS和jQuery的混合体

更多详细信息：

下面是我的列表页面中的一个示例行，它调用了

openDetailsPage

js函数：

<a onclick="openDetailsPage(@item.CommodityId,'@Html.DisplayFor(modelItem => item.CommodityName)')">
    <div class="ios-content-box px-4 py-1 mb-3 ios-hover-box">
        <div class="row font-12 my-2 ios-divider-line">
            <div class="col-6 f-w-600 color-orange text-right">@Html.DisplayFor(modelItem => item.CommodityName)</div>
            <div class="col-6 text-left"> <i class="fas fa-chevron-left  fa-fw  color-orange "></i></div>
        </div>
        <div class="row font-12 my-2 ios-divider-line">
            <div class="col-6 text-gray-600 text-right">type</div>
            <div class="col-6 text-gray-600 text-left">@Html.DisplayFor(modelItem => item.TypesName)</div>
        </div>
        <div class="row font-12 my-2 ios-divider-line">
            <div class="col-6 text-gray-600 text-right">Code</div>
            <div class="col-6 text-gray-600 text-left">@Html.DisplayFor(modelItem => item.CommodityCode)</div>
        </div>
        <div class="row font-12 my-2 ios-divider-line">
            <div class="col-6 text-gray-600 text-right">Barcode</div>
            <div class="col-6 text-gray-600 text-left">@Html.DisplayFor(modelItem => item.CommodityBarcode)</div>
        </div>
        <div class="row font-12 my-2 ios-divider-line">
            <div class="col-6 text-gray-600 text-right">Unit Price</div>
            <div class="col-6 text-gray-600 text-left">@Html.DisplayFor(modelItem => item.UnitPrice)</div>
        </div>
        <div class="row font-12 my-2 ios-divider-line">
            <div class="col-6 text-gray-600 text-right">Total Price</div>
            <div class="col-6 text-gray-600 text-left">@Html.DisplayFor(modelItem => item.SumPrice)</div>
        </div>
    </div>
</a>

---

一个简单快捷的解决方案是通过Ajax发布：

让我们把它想象成您的控制器：

    [HttpGet]
    public ActionResult ReportDetailed()
    {
        return View();
    }



    [HttpPost]
    public JsonResult ReportDetailed(DetailedViewModel detailedviewmodel)
    {
        var status = "error";
        var message = "";
        try
        {
            string commodity = detailedviewmodel.commodity;
            string commoditytype = detailedviewmodel.commodityType;
            string department = detailedviewmodel.department;
            List<string> purchasereporttypes = detailedviewmodel.purchaseReportTypes;
            string repository = detailedviewmodel.repository;
            string startdate = detailedviewmodel.dateValue_2;
            string enddate = detailedviewmodel.dateValue_1;
            string commdoityname = detailedviewmodel.commodityName;


            // your code here ...


            status = "success";                
            return Json(new { status, detailedviewmodel } , JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            message = ex.Message;
            return Json(new { status, message }, JsonRequestBehavior.AllowGet);
        }            
    }

在您的视图中，我为您复制整个Html和Javascript，只需抓住它并根据您的需要进行调整：

@model Your_Proj_Namespace.Models.DetailedViewModel

@{
    ViewBag.Title = "ReportDetailed";
}

<h2>ReportDetailed</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>DetailedViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.commodityType, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.commodityType, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.commodityType, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.commodityName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.commodityName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.commodityName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.department, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.department, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.department, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label>purchaseReportTypes: 3 inputs for example</label>
            <div class="col-md-10">
                <input type="text" name="purchaseReportTypes[0]" class="form-control inputPurchaseReportTypes " value="" />
                <input type="text" name="purchaseReportTypes[1]" class="form-control inputPurchaseReportTypes " value="" />
                <input type="text" name="purchaseReportTypes[2]" class="form-control inputPurchaseReportTypes " value="" />
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.repository, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.repository, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.repository, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.commodity, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.commodity, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.commodity, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.dateValue_1, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.dateValue_1, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.dateValue_1, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.dateValue_2, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.dateValue_2, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.dateValue_2, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" id="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}




@section scripts{
    <script>
        $('#submit').click(function (e) {
            e.preventDefault();
            alert('form submitted');


            var list = [];
            $('.inputPurchaseReportTypes').each( function (key, value) {
                list.push($(this).val());
            });



            const DATA = {
                commodityType: $('#commodityType').val(),
                commodityName: $('#commodityName').val(),
                department: $('#department').val(),
                repository: $('#repository').val(),
                commodity: $('#commodity').val(),
                purchaseReportTypes: list,
                dateValue_1: $('#dateValue_1').val(),
                dateValue_2: $('#dateValue_2').val(),
            };


            console.log(DATA);


            $.ajax({
                url: '/YourControllerName/ReportDetailed',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(DATA),

                success: function (result) {
                    alert('success');
                    console.log(result);
                    // your code here
                }
            });
        });



    </script>
}

@model\u Proj\u Namespace.Models.DetailedViewModel
@{
ViewBag.Title=“ReportDetailed”；
}
详细报告
@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
详细视图模型

@Html.ValidationSummary（true，“，new{@class=“text danger”}）
@LabelFor（model=>model.commodityType，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.commodityType，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.commodityType，“，new{@class=“text danger”}）
@LabelFor（model=>model.commodityName，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.commodityName，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.commodityName，“，new{@class=“text danger”}）
@LabelFor（model=>model.department，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.department，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.department，“，new{@class=“text danger”}）
purchaseReportTypes：例如3个输入
@LabelFor（model=>model.repository，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.repository，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.repository，“，new{@class=“text danger”}）
@LabelFor（model=>model.commodity，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.commodity，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.commodity，“，new{@class=“text danger”}）
@LabelFor（model=>model.dateValue_1，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.dateValue_1，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.dateValue_1，“，new{@class=“text danger”}）
@LabelFor（model=>model.dateValue_2，htmlAttributes:new{@class=“controllabel col-md-2”}）
@EditorFor（model=>model.dateValue_2，new{htmlAttributes=new{@class=“form control”}}）
@Html.ValidationMessageFor（model=>model.dateValue_2，“，new{@class=“text danger”}）
}
@节脚本{
$（“#提交”）。单击（函数（e）{
e、 预防默认值（）；
警报（“提交的表格”）；
var列表=[]；
$（'.inputPurchaseReportTypes'）。每个（函数（键、值）{
list.push（$（this.val（））；
});
常数数据={
commodityType:$（'#commodityType'）.val（），
commodityName:$（'#commodityName'）.val（），
部门：$（“#部门”）.val（），
存储库：$（“#存储库”）.val（），
商品：$（“#商品”）.val（），
purchaseReportTypes：列表，
dateValue_1:$（'#dateValue_1'）.val（），
dateValue_2:$（'#dateValue_2'）.val（），
};
控制台日志（数据）；
public class DetailedViewModel
{
    public string commodityType { get; set; }
    public string commodityName { get; set; }
    public string department { get; set; }
    public string repository { get; set; }
    public string commodity { get; set; }
    public string[] purchaseReportTypes { get; set; }

    public string dateValue_1 { get; set; }//start date
    public string dateValue_2 { get; set; }//end date

}

    [HttpGet]
    public ActionResult ReportDetailed()
    {
        return View();
    }



    [HttpPost]
    public JsonResult ReportDetailed(DetailedViewModel detailedviewmodel)
    {
        var status = "error";
        var message = "";
        try
        {
            string commodity = detailedviewmodel.commodity;
            string commoditytype = detailedviewmodel.commodityType;
            string department = detailedviewmodel.department;
            List<string> purchasereporttypes = detailedviewmodel.purchaseReportTypes;
            string repository = detailedviewmodel.repository;
            string startdate = detailedviewmodel.dateValue_2;
            string enddate = detailedviewmodel.dateValue_1;
            string commdoityname = detailedviewmodel.commodityName;


            // your code here ...


            status = "success";                
            return Json(new { status, detailedviewmodel } , JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            message = ex.Message;
            return Json(new { status, message }, JsonRequestBehavior.AllowGet);
        }            
    }

public class DetailedViewModel
{
    public string commodityType { get; set; }
    public string commodityName { get; set; }
    public string department { get; set; }
    public string repository { get; set; }
    public string commodity { get; set; }
    public List<string> purchaseReportTypes { get; set; }
    public string dateValue_1 { get; set; }//start date
    public string dateValue_2 { get; set; }//end date
}

@model Your_Proj_Namespace.Models.DetailedViewModel

@{
    ViewBag.Title = "ReportDetailed";
}

<h2>ReportDetailed</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>DetailedViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.commodityType, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.commodityType, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.commodityType, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.commodityName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.commodityName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.commodityName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.department, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.department, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.department, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label>purchaseReportTypes: 3 inputs for example</label>
            <div class="col-md-10">
                <input type="text" name="purchaseReportTypes[0]" class="form-control inputPurchaseReportTypes " value="" />
                <input type="text" name="purchaseReportTypes[1]" class="form-control inputPurchaseReportTypes " value="" />
                <input type="text" name="purchaseReportTypes[2]" class="form-control inputPurchaseReportTypes " value="" />
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.repository, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.repository, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.repository, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.commodity, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.commodity, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.commodity, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.dateValue_1, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.dateValue_1, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.dateValue_1, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.dateValue_2, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.dateValue_2, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.dateValue_2, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" id="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}




@section scripts{
    <script>
        $('#submit').click(function (e) {
            e.preventDefault();
            alert('form submitted');


            var list = [];
            $('.inputPurchaseReportTypes').each( function (key, value) {
                list.push($(this).val());
            });



            const DATA = {
                commodityType: $('#commodityType').val(),
                commodityName: $('#commodityName').val(),
                department: $('#department').val(),
                repository: $('#repository').val(),
                commodity: $('#commodity').val(),
                purchaseReportTypes: list,
                dateValue_1: $('#dateValue_1').val(),
                dateValue_2: $('#dateValue_2').val(),
            };


            console.log(DATA);


            $.ajax({
                url: '/YourControllerName/ReportDetailed',
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(DATA),

                success: function (result) {
                    alert('success');
                    console.log(result);
                    // your code here
                }
            });
        });



    </script>
}