温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Submit values from razor view to a controller action which accept values by HTTP Post method
asp.net-mvc c# javascript post razor

javascript - 将值从razor视图提交到控制器操作,该操作通过HTTP Post方法接受值

发布于 2020-04-13 09:58:55

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

控制器用于Details通过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);
}

对于这种类型的值路由,我有些困难:

  1. 输入对象很复杂,所以路由会非常复杂。例如/BuyReport/ReportDetailed?commodityType=0&commodityName=dummyCommodityName&department=1&repository=2&commodity=dummyCommodityID&dateValue_1=dummyDate1&dateValue_2=dummyDate2/BuyReport/ReportDetailed/0/itemName/1/2/1/123/
  2. get参数中的任何特殊字符,例如/都会中断路由
  3. 我无法传递数组之类的内容,因此我应该在发送之前进行转换

因此,我正在寻找一种使用“ Post”方法发送参数的方法,例如表单提交按钮具有以下约束的情况:

  1. 我认为没有表格
  2. 我想将值发布到控制器,页面必须导航到详细信息视图
    1. 第一页中的每个项目都有不同的行和不同的ID,因此我认为为每行创建一个表单是不合理的。

我想知道有什么方法可以Post根据我的要求实现参数?我不在乎是否将C#,JS和jQuery混合使用。

更多细节:

这是我的列表页面中调用openDetailsPagejs函数的示例行

<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>

目前我的控制器如下:

[Route("BuyReport/ReportDetailed/{commodityType}/{commodityName}/{department}/{repository}/{commodity}/{purchaseReportTypes}/{dateValue_1}/{dateValue_2}")]

public async Task<ActionResult> ReportDetailed(
    string commodityType, 
    string commodityName,
    string department,
    string repository,
    string commodity,
    string purchaseReportTypes,
    string dateValue_1,
    string dateValue_2
    )
{


}

但我想将其更改为以下内容:

[HttpPost]
public async Task<ActionResult> ReportDetailed(DetailedViewModel detailedviewmodel){

    string commodity = detailedviewmodel.commodity;
    string commoditytype = detailedviewmodel.commoditytype;
    string department = detailedviewmodel.department;
    string purchasereporttypes = detailedviewmodel.purchasereporttypes;
    string repository = detailedviewmodel.repository;
    string startdate = detailedviewmodel.datevalue_1;
    string enddate = detailedviewmodel.datevalue_2;
    string commdoityname = detailedviewmodel.commodityname;

}

其中DetailedViewModel的定义如下:

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

}

查看更多

提问者
VSB
被浏览
126
Amirhossein Mehrvarzi 2020-02-08 04:49

这不是实现您的目标的正确方法您的代码也容易受到开发者的攻击不要使用破坏正常Web应用程序行为的解决方案。

而是将参数发送到相应的控制器方法,然后通过模型传递进行内部重定向(控制器端)。如果您的数据存储在数据库中,只需CommodityId在控制器端发送和查找详细信息,而不是像发送完整的详细信息formHTTPPOST)。这样,您就可以设计一个设计良好的项目,而不会因破坏行为而导致不必要的崩溃,并且您的代码看起来很简单明了。