2017-06-01 68 views
0

我需要傳遞對象列表。我傳遞數據拋出ajax調用,ajax返回結果如預期,所以ajax調用獲得正確的結果,但部分視圖不會呈現。ajax調用後不會渲染部分視圖

控制器

[HttpPost] 
public ActionResult GetXlFile() 
{ 
    List<ListMatchDetails> lstPreview = new List<ListMatchDetails>(); 

    if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any()) 
    { 
     var xlFile = System.Web.HttpContext.Current.Request.Files["FileToPreview"]; 
     HttpPostedFileBase filebase = new HttpPostedFileWrapper(xlFile); 
     if (null != filebase && filebase.ContentLength > 0) 
     { 
      if (String.Compare(filebase.ContentType, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", true, System.Globalization.CultureInfo.InvariantCulture) == 0) 
      { 
       using (Stream stream = filebase.InputStream) 
       { 
        IExcelDataReader reader = null; 

        if (filebase.FileName.EndsWith(".xls")) 
        { 
         reader = ExcelReaderFactory.CreateBinaryReader(stream); 
        } 
        else if (filebase.FileName.EndsWith(".xlsx")) 
        { 
         reader = ExcelReaderFactory.CreateOpenXmlReader(stream); 
        } 

        reader.IsFirstRowAsColumnNames = true; 
        DataSet dsResult = reader.AsDataSet(); 
        DataTable dtResult = dsResult.Tables[0]; 
        if (dtResult.Rows.Count > 0) 
        { 
         foreach (DataRow dr in dtResult.Rows) 
         { 
          ListMatchDetails lmd = new ListMatchDetails(); 
          lmd.FirstName = (dr[0] != DBNull.Value) ? dr[0].ToString() : string.Empty; 
          lmd.LastName = (dr[1] != DBNull.Value) ? dr[0].ToString() : string.Empty; 

          lstPreview.Add(lmd); 
         } 
        } 
        reader.Close(); 
       } 
      } 
     } 
    } 

    return PartialView("_ExcelGrid", lstPreview); 
} 

視圖

@using app.Models; 
@model IEnumerable<ListMatchDetails> 

@{ 
    if (Model.Count() > 0) 
    { 
     ListMatchDetails row = Model.FirstOrDefault(); 
     <table class="table table-hover table-responsive scrollable table-striped "> 
      <thead id="tableHeader"> 
       <tr> 

        <td> 
         @Html.LabelFor(x => row.FirstName) 
        </td> 
        <td> 
         @Html.LabelFor(x => row.LastName) 
        </td> 

       </tr> 
      </thead> 
      <tbody class="pre-scrollable"> 

       @foreach (var record in Model) 
       { 
        <tr> 

         <td> 
          @Html.ValueForModel(record.FirstName) 

         </td> 
         <td> 
          @Html.ValueForModel(record.LastName) 
         </td> 

        </tr> 
       } 
      </tbody> 
     </table> 
    } 
} 

的jQuery:

$('#btnPreview').click(function() { 
       var formData = new FormData(); 
       var files = $("#btnbrowse").get(0).files; 
       if (files.length > 0) { formData.append("FileToPreview", files[0]); } 
       $.ajax({ 
        url: '/ListMatch/GetXlFile', 
        type: 'POST', 
        dataType: 'json', 
        data: formData, 
        processData: false, 
        contentType: false, 
        success: function (result) { 
         //$('#record').html(result) 
         $('._ExcelGrid').json(result); 
        }, 
        error: function() { 
         //alert('Click Called'); 
        } 
       }); 
      }); 
+0

我在此問題中添加了代碼。 – kblau

回答

0

馬上蝙蝠您的操作方法比較您的jQuery的Ajax調用,它看起來像你試圖解析Ajax調用作爲一個JSON字符串的結果,但你返回_ExcelGrid局部視圖。除非_ExcelGrid局部視圖返回有效的JSON,否則當它嘗試將其解析爲JSON時會中斷。

我不知道它應該是怎麼回事,因爲我不確定你的視圖中有什麼._ExcelGrid,但一般來說你可以改變action方法返回JSON而不是局部視圖然後解析/處理客戶端的JSON或將返回的部分視圖分配給$("._ExcelGrid").html(result)的元素。你處理它的方式取決於你。

如果您選擇返回部分視圖,爲了實現起見,我會將您的ajax調用中的dataType更改爲html,因爲您不再期待JSON。您可能還希望將contentType設置爲要發送到服務器的內容類型,如果您未明確說明,偶爾會遇到有趣的錯誤。

0

它看起來像你需要使用$( '#記錄')HTML(結果)。請確保您有類似

<div id="record"> 

</div> 
0

這會讓你通過你的路障。如果您希望我添加更多與您的問題有關的代碼,請告訴我。

_ExcelGrid.cshtml

A Partial View 

控制器:

public class HomeController : Controller 
{ 
    [HttpPost] 
    public PartialViewResult GetXlFile() 
    { 
     return PartialView("_ExcelGrid"); 
    } 

    public ActionResult GetXlFile(int? id) 
    { 
     return View(); 
    } 

查看:

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 
@*credit to 
https://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor*@ 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index800</title> 
    <script src="~/Scripts/jquery-1.12.4.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('form').submit(function (event) { 
       $.ajax({ 
        url: this.action, 
        type: "POST", 
        data: $(this).serialize(), 
        success: function (result) { 
         $('#result').html(result); 
        } 
       }); 
       return false; 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form> 
     <div> 
      @using (Html.BeginForm()) 
      { 
       <input type="submit" value="OK" /> 
      } 
      <div id="result"></div> 
     </div> 
    </form> 
</body> 
</html> 
0

迎接這一天!

您是否已在主頁上定義了局部視圖?如果不是,您需要在主頁上定義局部視圖,就像

<div id="dvExcelGrid"> 
    @Html.Partial("_ExcelGrid", "your model") 
    </div>