2009-06-18 14 views
12

J'ai une vue avec une grille qui contient des éléments ajoutés à un poste de travail. L'utilisateur peut sélectionner un élément dans une liste déroulante et cliquer sur un lien d'action qui appelle un contrôleur qui ajoute cet élément au poste de travail. Je peux le faire fonctionner en lisant l'objet FormCollection dans l'action Post du contrôleur.ASP.NET MVC Transmission des données de la vue au contrôleur

<p> 
    <% using(Html.BeginForm("AddItem", "Home")) { %> 
    <label for="ItemID">Item:</label> 
    <%= Html.DropDownList("ItemID", Model.ItemsList) %> 
    <%= Html.Hidden("WorkstationID", Model.Workstation.RecordID) %> 
    <input type="submit" value="Submit" /> 
    <% } %> 
</p> 

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult AddItem(FormCollection formValue) 
{ 
    long workstationId = Convert.ToInt64(formValue["WorkstationID"]); 
    long itemId = Convert.ToInt64(formValue["ItemID"]); 

    Workstation workstation = itilRepository.FindWorkstation(workstationId); 
    Item item = itilRepository.FindItem(itemId); 

    itilRepository.AddItem(workstation, item); 
    itilRepository.Save(); 

    return Content("Item added successfully!"); 
} 

Ce que je veux faire est d'être en mesure de présenter les deux paramètres du WorkstationID et Itemid au contrôleur en utilisant Ajax.ActionLink et ont le nouvel élément qui a été ajouté s'inséré dans la grille . Je suis rendu la grille comme ceci:

<table> 
     <tr> 
     <th></th> 
     <th> 
     Name 
     </th> 
     <th> 
     Service Tag 
     </th> 
     <th> 
     Serial Number 
     </th> 
    </tr> 

    <% foreach (var item in Model.Items) { %> 

    <tr> 
     <td> 
     <%= Html.ActionLink("Edit", "ItemEdit", new { id = item.RecordID }) %> | 
     <%= Html.ActionLink("Details", "ItemDetails", new { id = item.RecordID })%> 
     </td> 
     <td> 
     <%= Html.Encode(item.Name) %> 
     </td> 
     <td> 
     <%= Html.Encode(item.ServiceTag) %> 
     </td> 
     <td> 
     <%= Html.Encode(item.SerialNumber) %> 
     </td> 
    </tr> 

    <% } %> 

</table> 

Le problème est à moi est lorsque je soumets à l'aide du ActionLink Je ne peux pas comprendre comment passer les paramètres au contrôleur et comment mettre à jour la grille sans recharger la vue entière

J'apprécierais vraiment de l'aide avec ceci ou même un lien vers un tutoriel qui fait quelque chose de semblable.

Merci!

Ceci est la version de travail, le seul problème est que lorsque le contrôleur retourne la vue partielle qui est tout ce qui est rendu la page réelle a disparu.

<% using (Ajax.BeginForm("AddItem", null, 
     new AjaxOptions 
     { 
      UpdateTargetId = "ResultsGoHere", 
      InsertionMode = InsertionMode.Replace 
     }, 
     new { @id = "itemForm" })) 
{ %> 

    <label for="ItemID">Item:</label> 
    <%= Html.DropDownList("itemId", Model.ItemsList) %> 
    <%= Html.Hidden("workstationId", Model.Workstation.RecordID) %> 

    <a href="#" onclick="$('#itemForm').submit();">Submit</a> 

    <div id="ResultsGoHere"> 
     <% Html.RenderPartial("WorkstationItems", Model.Items); %> 
    </div> 

<% } %> 

Je ne sais pas quelle est la cause, le remplaçons a été fonctionne correctement avant, mais le contrôleur ne recevait pas le menu déroulant valeur. Maintenant, le contrôleur obtient la valeur mais la vue partielle renvoyée remplace la page entière.

La méthode d'action:

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult AddItem(string workstationId, string itemId) 
{ 
    long lworkstationId = Convert.ToInt64(workstationId); 
    long litemId = Convert.ToInt64(itemId); 

    Workstation workstation = itilRepository.FindWorkstation(lworkstationId); 
    Item item = itilRepository.FindItem(litemId); 

    IQueryable<Item> items = itilRepository.AddItem(workstation, item); 
    itilRepository.Save(); 

    return PartialView("WorkstationItems", items); 
} 

Ceci est le code HTML de la vue qui fait tout le travail:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ITILDatabase.Models.WorkstationFormViewModel>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    Workstation Details 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 
    <link type="text/css" href="/../Content/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />  
    <script type="text/javascript" src="/../Content/js/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="/../Content/js/jquery-ui-1.7.2.custom.min.js"></script> 

    <h2> 
     Workstation Details</h2> 
    <fieldset> 
     <legend>Fields</legend> 
     <p> 
      Record ID: 
      <%= Html.Encode(Model.Workstation.RecordID) %> 
     </p> 
     <p> 
      Name: 
      <%= Html.Encode(Model.Workstation.Name) %> 
     </p> 
     <p> 
      Description: 
      <%= Html.Encode(Model.Workstation.Description) %> 
     </p> 
     <p> 
      Site: 
      <%= Html.Encode(Model.Workstation.Site.Name) %> 
     </p> 
     <p> 
      Modified By: 
      <%= Html.Encode(Model.Workstation.ModifiedBy) %> 
     </p> 
     <p> 
      Modified On: 
      <%= Html.Encode(String.Format("{0:g}", Model.Workstation.ModifiedOn)) %> 
     </p> 
     <p> 
      Created By: 
      <%= Html.Encode(Model.Workstation.CreatedBy) %> 
     </p> 
     <p> 
      Created On: 
      <%= Html.Encode(String.Format("{0:g}", Model.Workstation.CreatedOn)) %> 
     </p> 
    </fieldset> 
    <fieldset> 
     <legend>People</legend> 
     <% Html.RenderPartial("WorkstationPeople", Model.People); %> 
    </fieldset> 
    <fieldset> 
     <legend>Positions</legend> 
     <% Html.RenderPartial("WorkstationPositions", Model.Positions); %> 
    </fieldset> 
    <fieldset> 
     <legend>Items</legend> 

      <% using (Ajax.BeginForm("AddItem", "Home", null, 
        new AjaxOptions 
        { 
         UpdateTargetId = "ResultsGoHere", 
         InsertionMode = InsertionMode.Replace 
        }, 
        new { @id = "itemForm" })) 
      { %> 

       <label for="ItemID">Item:</label> 
       <%= Html.DropDownList("itemId", Model.ItemsList) %> 
       <%= Html.Hidden("workstationId", Model.Workstation.RecordID) %> 

       <a href="#" onclick="$('#itemForm').submit();">Submit</a> 

       <div id="ResultsGoHere"> 
        <% Html.RenderPartial("WorkstationItems", Model.Items); %> 
       </div> 

      <% } %> 
    </fieldset> 
    <br /> 
    <p> 
     <%=Html.ActionLink("Edit", "WorkstationEdit", new { id = Model.Workstation.RecordID }) %> 
     | 
     <%=Html.ActionLink("Back to List", "Index") %> 
    </p> 
</asp:Content> 

Répondre

15

Quel résultat attendez-vous de l'appel AJAX?

Vous pouvez utiliser les méthodes d'aide de l'objet AjaxHelper au lieu du HtmlHelper pour rendre le lien. Par exemple, pour obtenir du nouveau contenu avec un AJAX HttpPost appel et l'insérer dans un <div> avec l'id prêt à ResultsGoHere vous restituez le lien suivant:

<%= Ajax.ActionLink("Edit", "ItemEdit", 
         new { 
          itemId = item.RecordId, 
          workstationId = myWorkStationId 
         }, 
         new AjaxOptions { 
          HttpMethod="POST", 
          UpdateTargetId="ResultsGoHere", 
          InsertionMode = InsertionMode.Replace 
         }) %> 

Dans votre AcionMethod, vous pouvez simplement tester sur Request.IsAjaxRequest() pour décider retourner:

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult ItemEdit(string itemId, string workstationId) { 
    // edit the item and get it back 

    if (Request.IsAjaxRequest()) { 
     return PartialView("SingleItem", item); 
    } 
    return RedirectToAction("ItemEdit", new { itemId = item.RecordId, workstationId = workstationId }); 
} 

// fallback for get requests 
public ActionResult ItemEdit(string itemId, string workstationId) 
{ 
    // do stuff and return view 
} 
+0

C'est génial! J'ai toujours un problème, comment puis-je passer deux Id au contrôleur? Je dois passer dans workstationId et itemId. Comment puis-je retirer l'itemId qui a été sélectionné dans la liste déroulante et l'utiliser dans le lien d'action? – Lukasz

+0

Vous pouvez simplement ajouter un paramètre d'entrée à l'actionmethod, et l'ajouter aux valeurs de l'itinéraire. Si vous voulez obtenir une bonne URL pour l'appel, vous devrez ajouter un itinéraire correspondant. J'ai modifié mon code en conséquence. –

+0

Une dernière question, comment puis-je obtenir la valeur de la liste déroulante dans Ajax.ActionLink? – Lukasz

2

Voici comment vous pouvez le faire en utilisant la méthode Ajax.BeginForm() à la place:

<% using (Ajax.BeginForm("ItemEdit", null, new AjaxOptions 
      { 
       UpdateTargetId = "ResultsGoHere", 
       InsertionMode = InsertionMode.Replace 
      }, new { @id = "itemForm" }) 
{ %> 
<p> 
    <%= Html.DropDownList("itemId") %></p> 
<p> 
    <%= Html.DropDownList("workstationId") %></p> 
<p> 
    <a href="#" onclick="$('#itemForm').submit();">Submit</a> 
</p> 
<% } %> 

S'il vous plaît noter que le code est dans son état actuel en aucune façon pleinement fonctionnel - les listes déroulantes ne reçoivent leurs éléments de nulle part, il n'y a pas <div> pour prendre soin des résultats de la demande AJAX, et l'attribut onclick sur le Le lien qui soumet le formulaire requiert que jQuery soit inclus (auquel cas il est préférable de lui donner un identifiant et d'y ajouter un gestionnaire d'événements click() depuis un fichier séparé js ...

EDIT: Oh, et je n'ai pas vérifié qu'il est correct de transmettre une valeur null au paramètre routeValues. Si ce n'est pas le cas, fournissez juste le nom du contrôleur et de l'action, et tout ira bien.

+0

J'ai ajouté plus de code à la fin de ma question. – Lukasz

+0

A quoi ressemble votre HTML rendu? Et votre méthode d'action? –

+0

Le HTML est juste le code de la vue partielle. L'URL était/Home/WorkstationDetail/1 et après le post est/Home/AddItem – Lukasz

0

Comment pouvez-vous passer le modèle de la vue à l'action post-création du contrôleur en utilisant ajax.actionlink?

0

Ici, comme ma connaissance, nous pouvons transmettre des données de View au contrôleur de deux manières ...

  1. L'utilisation Formcollection construit en mot-clé comme celui-ci ..

    [HttpPost] 
    public string filter(FormCollection fc) 
    { 
        return "welcome to filtering : "+fc[0]; 
            (or) 
        return "welcome to filtering : "+fc["here id of the control in view"]; 
    
    } 
    

FormCollection fonctionnera uniquement lorsque vous cliquez sur un bouton à l'intérieur d'un formulaire. Dans d'autres cas, il ne contient que des données vides

  1. classe modèle en utilisant

    [HttpPost] 
    public string filter(classname cn) 
    { 
        return "welcome to filtering : "+cn.Empid+""+cn.Empname; 
    } 
    
0

Voici comment vous serez en mesure d'envoyer plusieurs paramètres par ActionLink.
Pour cette situation s'il vous plaît se référer au code ci-dessous:

@Html.ActionLink("Link text", "Action Name", null, routeValues: new { pram_serviceLine = Model.ServiceLine_ID, pram_Month = Model.Month, pram_Year = Model.Year, flag = "ROTATION" } 

Répondre si cela fonctionne.

Questions connexes