Question

我想用一些数据填充div。借助AJAX，JSON和asp.net mvc4中的控制器函数调用此数据。我的主要目标是在div上添加一些数据。

这是标记

@using (Ajax.BeginForm(actionName: "GetEncryptedQuery", controllerName: "Home", ajaxOptions: new AjaxOptions {HttpMethod = "Post", OnBegin = "searchBegin", OnSuccess = "searchSuccess", OnFailure = "actionFailed"}, htmlAttributes: new Dictionary<string, object>(){{"id","frmSearch"},{"class","form-schedules"}}, routeValues: null))
                                    {
                                        @Html.ValidationSummary(true)
                                        <div class="form-group">
                                            <div class="form-control-wrapper">
                                                @*<input type="text" class="form-control" id="search-origin" placeholder="Origin">*@
                                                @Html.TextBoxFor(model=>model.Origin,new {@class="form-control",id="search-origin", placeholder="Origin"})
                                                @Html.HiddenFor(model=>model.OriginId,new {@class="form-control",id="search-origin-id"})
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="form-control-wrapper">
                                                @*<input type="text" class="form-control" id="search-destination" placeholder="Destination">*@
                                                @Html.TextBoxFor(model=>model.Destination,new {@class="form-control",id="search-destination", placeholder="Destination"})
                                                @Html.HiddenFor(model=>model.DestinationId,new {@class="form-control",id="search-Destination-id"})
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-red pull-right">GO</button>
                                    }
                                <!-- partial search origin ajax -->
                                <div class="search-origin-ajax list-below-origin" id="search-below-origin">



                                </div>

这是AJAX Call

$(document).ready(
$("#search-below-origin").change(function(evt) {

    if ($("#search-below-origin").val() != "-1") {
        $.ajax({
            type: 'GET',
            dataType: 'json',
            cache: false,
            url: '/Home/PopulateLocation',
            success: function(data) {
                $.each(data, function(index, element) {

                    $.html('<a href="#" class="modal-select-origin"><span class="ajax-star"></span><span class="ajax-content">' + element.valueOf("Name") +
                        '</span><span class="ajax-icon-area"><span class="icon-area"></span></span></a>').appendTo("#search-below-origin");
                });
            }
        });
    }
}));

这里是＆＃34; home＆＃34;控制器

[HttpGet]
    private ActionResult PopulateLocation()
    {
        var statesResults = from l in _db.Locations.AsParallel()
            select new PseudoLocation()
            {
                Id = l.Id,
                Name = l.Name
            };

        var statesList = Json(statesResults,JsonRequestBehavior.AllowGet);
        return statesList;
    }

Answer 1

一些问题：

您可能打算制作方法public：

[HttpGet]
public ActionResult PopulateLocation()
{
    // ...
}

#search-below-origin是div，似乎不包含任何可能触发change事件的元素。您的意思是#search-origin吗？

.html是jQuery上的实例方法。你可以创建一个内存html片段，只需调用jQuery（使用$），所以你不需要在这里使用.html：

$('<a href="#" class="modal-select-origin"><span class="ajax-star"></span><span class="ajax-content">' + element.valueOf("Name") +
    '</span><span class="ajax-icon-area"><span class="icon-area"></span></span></a>')
        .appendTo("#search-below-origin");

用asp.net mvc中的ajax填充div

1 个答案: