在asp.net中填充div與ajax mvc

我想用一些數據填充div。這些數據是在asp.net mvc4中的AJAX，JSON和控制器功能的幫助下調用的。我的主要目標是追加div與一些數據。在asp.net中填充div與ajax mvc

這裏是標記

@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調用

$(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"); 
       }); 
      } 
     }); 
    } 
}));

，這裏是一個函數在「家」的控制器

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

來源

2014-06-12 user2426998

什麼問題，你的代碼有？ –

數據未附加在div中。當我調試這個函數時，沒有從ajax中獲得。 – user2426998

的幾個問題：

您可能意味着使該方法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");

來源

2014-06-12 19:20:34

是的我的意思是＃search-origin – user2426998

不幸的是它不起作用 – user2426998

在asp.net中填充div與ajax mvc

回答

相關問題