MVC: Résultat de JSON Remplissage automatique Afficher

Question

Je suis bloqué dans la publication du résultat de JSON, donc laissé la partie de succès vide.

Voir

@model MvcApplication2.Models.About 

@{ 
    ViewBag.Title = "About"; 
} 


<p> @Html.DisplayFor(m=>m.test) </p> 
<p> @Html.DisplayFor(m=>m.test1) </p> 

Modèle

public class About 
    { 
     public string test { get; set; } 
     public string test1 { get; set; } 
    } 

Contrôleur

public class HomeController : Controller 
    { 
     public JsonResult About() 
     { 
      ViewBag.Message = "Your app description page."; 
      About ab = new About() 
           { 
            test = "a", 
            test1 = "b" 
           }; 
      return Json(ab, JsonRequestBehavior.AllowGet); 
     } 
} 

JQuery dans le fichier externe

$(document).ready(function() { 

    var itemName = "#btn-about"; 

    $(itemName).click(function() { 
     $.ajax({ 
      type: 'GET', 
      dataType: 'Json', 
      url: '/Home/About', 
      success: function (data) { 
       var option = ''; 

      }, 
      error: function (xhr, ajaxOption, thorwnError) { 
       console.log("Error") 
      }, 
      processData: false, 
      async: true 
     }); 
    }); 
}); 

=> Je suis un peu confus maintenant. Bien que j'obtienne un résultat au format JSON en utilisant AJAX, je veux le publier dans cette vue 'About'. La vue a déjà @model défini, donc dès que j'obtiens le résultat, je veux que la vue le charge automatiquement car je ne pense pas que ce soit une bonne option pour créer des contrôles html en Javascript.

=> Est-il possible ou dois-je remplir le contrôle un par un.

=> Je suis nouveau à MVC, alors pourriez-vous me faire part de toute bonne suggestion.

Answer 1

Vous devez donner à vos éléments un identifiant ou une classe qui vous permettra d'interagir facilement avec eux sur le client. Ensuite, lorsque vous obtenez votre réponse, prenez les valeurs des données JSON et mettez à jour les éléments (en utilisant l'id/class pour le trouver) avec la nouvelle valeur. Je suppose que vous n'avez aucun modèle spécial défini pour vos chaînes, ajustez les sélecteurs dans le code si nécessaire pour en tenir compte si vous le faites.

Voir

<p class="testDisplay"> @Html.DisplayFor(m=>m.test) </p> 
<p class="test1Display"> @Html.DisplayFor(m=>m.test1) </p> 

code client

$(document).ready(function() { 

    var itemName = "#btn-about"; 

    $(itemName).click(function() { 
     $.ajax({ 
      type: 'GET', 
      dataType: 'Json', 
      url: '/Home/About', 
      success: function (data) { 
       $('.testDisplay').html(data.test); 
       $('.test1Display').html(data.test1); 
      }, 
      error: function (xhr, ajaxOption, thorwnError) { 
       console.log("Error") 
      }, 
      processData: false, 
      async: true 
     }); 
    }); 
}); 

Answer 2

au lieu de retourner les données que vous devrez retourner la vue sous forme de chaîne et la jquery utiliser pour remplacer le résultat.

Controller:

public JsonResult About() 
    { 
     var model = // Your Model 
     return Json((RenderRazorViewToString("ViewNameYouWantToReturn", model)), JsonRequestBehavior.AllowGet); 
    } 

    [NonAction] 
    public string RenderRazorViewToString(string viewName, object model) 
    { 
     ViewData.Model = model; 
     using (var sw = new StringWriter()) 
     { 
      var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); 
      var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); 
      viewResult.View.Render(viewContext, sw); 
      viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View); 
      return sw.GetStringBuilder().ToString(); 
     } 
    } 

Ensuite, en utilisant jquery vous pouvez remplacer le résultat dans un conteneur pour exemple: div comme suit:

$.ajax({ 
     type: 'GET', 
     dataType: 'Json', 
     url: '/Home/About', 
     success: function (result) { 
      $("#divId").replaceWith(result); 
     }, 

Answer 3

Controller:

public ActionResult About() 
{ 
    var model = repo.GetModel(); 
    return PartialViewResult("about", model); 
} 

jQuery:

$.ajax("/Controller/About/", { 
    type: "GET", 
    success: function (view) { 
     $("#aboutDiv").html(view); 
    } 
}); 

Dans Vue principale:

<div id="aboutDiv"><div>