在javascript中使用参数调用ajax脚本到控制器中的方法

时间:2017-08-12 19:40:07

标签: javascript asp.net razor asp.net-ajax

这是我的主题部分,带有脚本

<head>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        $(function () {
            $("#SelectHouse").click(function () {
                var selected = $("#SelectedHouseDetailsId option:selected").text();
                $("#SelectedHouseDetailsText").val(selected);
                var idd = $("#Model.Reservation.Id").text();

            });    
        })
        $.ajax({
            url: "/ClientReservations/GetView",
            type: "GET",
            dataType: "html",
            data: {id: idd,name: selected}
        })
                .success(function(result){
                    $('#divForSelectHouse').html(result)
                })
        }
    </script>   

    <script type="text/javascript">
        function MyFunction() {
            var selected = $("#SelectedHouseDetailsId option:selected").text();
            $("#SelectedHouseDetailsText").val(selected);
        }
    </script>

</head>

我想在控制器中调用方法,然后在表单部分点击按钮

<div class="form-group">
        @Html.Label("Domki", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.SelectedHouseDetailsId, Model.Houses)
        </div>
        <div class="col-md-offset-2 col-md-10">
            <input type="button" class="SelectHouse"
                   value="Wybierz domek" id="SelectHouse" />
        </div>
    </div>

我将两个参数传递给以下方法

public ActionResult GetView(int id,string name)
        {
            ReservationHouseDetails houseDetails=null;
            repository.GetHousesForReservation(id).Where(item => item.Name.Equals(name)).ForEach(item => houseDetails = new ReservationHouseDetails()
            {
                House=item,
                Meal = repository.GetHouseMealForReservation(item.Id),
                Participants = repository.GetParticipantsHouseForReservation(item.Id)
            });

            return PartialView("ReservationHouseDetails", houseDetails);
        }

返回的PartialView应该放入div部分w view Details.cshtml

<div id="divForSelectHouse">


    </div>

2 个答案:

答案 0 :(得分:0)

首先需要将部分视图渲染为字符串,然后将部分视图作为字符串返回。

添加静态类来实现:

   public static class RenderViewToString
{
    public static string RenderPartialViewToString(Controller thisController, string viewName, object model)
    {
        // assign the model of the controller from which this method was called to the instance of the passed controller (a new instance, by the way)
        thisController.ViewData.Model = model;

        // initialize a string builder
        using (StringWriter sw = new StringWriter())
        {
            // find and load the view or partial view, pass it through the controller factory
            ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(thisController.ControllerContext, viewName);
            ViewContext viewContext = new ViewContext(thisController.ControllerContext, viewResult.View, thisController.ViewData, thisController.TempData, sw);

            // render it
            viewResult.View.Render(viewContext, sw);

            //return the razorized view/partial-view as a string
            return sw.ToString();
        }
    }
}

然后像这样使用:

//this  = inside Controller
var html = RenderViewToString.RenderPartialViewToString(this, "ReservationHouseDetails", houseDetails);

return Content(html);

How to Render Partial View into a String

答案 1 :(得分:0)

最后我有解决方案,控制器中的方法必须具有属性

[HttpPost]
        public ActionResult AjaxMethod(int id,string name)
        {
            ReservationHouseDetails houseDetails=null;
            repository.GetHousesForReservation(id).Where(item => item.Name.Equals(name)).ForEach(item => houseDetails = new 
    ReservationHouseDetails()
                {
                    House=item,
                    Meal = repository.GetHouseMealForReservation(item.Id),
                    Participants = repository.GetParticipantsHouseForReservation(item.Id)
                });
                return PartialView("~/Views/Shared/ReservationHouseDetails.cshtml", houseDetails);
            }

使用dropdowlist更正了脚本。

<script type="text/javascript">
            $(function () {
                $(".btnGet").click(function () {
                    $.ajax({
                        type: "POST",
                        url: "/ClientReservations/AjaxMethod",
                        data: '{id: "' + $("#idValue").val() + '",name:"' + $("#SelectedHouseDetailsId option:selected").text() + '" }',
                        contentType: "application/json; charset=utf-8",
                        dataType: "text",
                        success: function (response) {
                            $('#SelectHouse').html(response)
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        },
                        error: function (response) {
                            alert(response.responseText);
                            console.log(response.responseText)
                        }
                    });
                });
            });
    </script>

<input type="hidden" id="idValue" value=@Model.Reservation.Id />
        <input type="button" id="btnGet" value="Wyświetl" />

<div class="form-group">
            @Html.Label("Domki", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("SelectedHouseDetailsId", Model.Houses)
            </div>
        </div>