ASP.NET MVC ruft den Textfeld-Eingabewert ab


76

Ich habe einen Textfeldeingang und einige Optionsfelder. Zum Beispiel sieht mein Textbox-Eingabe-HTML so aus:

<input type="text" name="IP" id="IP" />

Sobald der Benutzer auf einer Webseite auf eine Schaltfläche klickt, möchte ich Daten an meinen Controller übergeben:

<input type="button" name="Add" value="@Resource.ButtonTitleAdd"  onclick="location.href='@Url.Action("Add", "Configure", new { ipValue =@[ValueOfTextBox], TypeId = 1 })'"/>

Vielleicht ist es trivial, aber mein Problem ist, dass ich nicht weiß, wie ich den Textfeldwert abrufen und an den Controller weiterleiten kann. Wie kann ich den Textfeldwert lesen und an den Controller weiterleiten ipValue=@[ValueOfTextBox]?

Antworten:


144

Ein einfaches ASP.NET MVC-Anmeldeformular mit E-Mail-Textfeld würde folgendermaßen implementiert:

Modell

Die Daten aus dem Formular werden diesem Modell zugeordnet

public class SubscribeModel
{
    [Required]
    public string Email { get; set; }
}

Aussicht

Der Ansichtsname sollte mit dem Namen der Controller-Methode übereinstimmen.

@model App.Models.SubscribeModel

@using (Html.BeginForm("Subscribe", "Home", FormMethod.Post))
{
    @Html.TextBoxFor(model => model.Email)
    @Html.ValidationMessageFor(model => model.Email)
    <button type="submit">Subscribe</button>
}

Regler

Der Controller ist für die Verarbeitung der Anforderungen und die Rückgabe der richtigen Antwortansicht verantwortlich.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Subscribe(SubscribeModel model)
    {
        if (ModelState.IsValid)
        {
            //TODO: SubscribeUser(model.Email);
        }

        return View("Index", model);
    }
}

Hier ist meine Projektstruktur. Bitte beachten Sie, dass der Ordner "Home" -Ansichten mit dem Namen des HomeControllers übereinstimmt.

ASP.NET MVC-Struktur


1
Und wenn ich neben dem Textfeldwert mehr als einen Parameter übergeben muss, zum Beispiel eine Zahl, um im Controller den Typ von etwas zu identifizieren, ist dies mit Ihrer Methode möglich? Wenn ja, können Sie mir sagen, wie?
Ralph

@AndreiMikhalevich Kannst du ein Beispiel mit HTML-Post geben?
Koushik Saha

@ user3132179 Der einzige Unterschied besteht darin, dass Sie das Attribut [HttpPost] für eine Aktion festlegen und offensichtlich die Post-Methode in einem Formular verwenden müssen.
Andrei

1
Die C # -Ansicht hat (m => m.FirstName)und die Ansicht und der Controller haben @Html.TextBox("name"). Muss der "Name" der Html.TextBox mit der UserModel- Variablen übereinstimmen ? Wenn nicht, wie werden diese Seitenwerte der richtigen Objekteigenschaft zugeordnet?
JP2-Code

25

Sie können jQuery verwenden:

<input type="text" name="IP" id="IP" value=""/>
@Html.ActionLink(@Resource.ButtonTitleAdd, "Add", "Configure", new { ipValue ="xxx", TypeId = "1" }, new {@class = "link"})

<script>
  $(function () {
    $('.link').click(function () {
      var ipvalue = $("#IP").val();
      this.href = this.href.replace("xxx", ipvalue);
    });
  });
</script>

17

Versuche dies.

Aussicht:

@using (Html.BeginForm("Login", "Accounts", FormMethod.Post)) 
{
   <input type="text" name="IP" id="IP" />
   <input type="text" name="Name" id="Name" />

   <input type="submit" value="Login" />
}

Regler:

[HttpPost]
public ActionResult Login(string IP, string Name)
{
    string s1=IP;//
    string s2=Name;//
}

Wenn Sie eine Modellklasse verwenden können

[HttpPost]
public ActionResult Login(ModelClassName obj)
{
    string s1=obj.IP;//
    string s2=obj.Name;//
}

6

Ein anderer Weg mit der Ajax-Methode:

Aussicht:

@Html.TextBox("txtValue", null, new { placeholder = "Input value" })
<input type="button" value="Start" id="btnStart"  />

<script>
    $(function () {
        $('#btnStart').unbind('click');
        $('#btnStart').on('click', function () {
            $.ajax({
                url: "/yourControllerName/yourMethod",
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: JSON.stringify({
                    txtValue: $("#txtValue").val()
                }),
                async: false
            });
       });
   });
</script>

Regler:

[HttpPost]
public EmptyResult YourMethod(string txtValue)
{
    // do what you want with txtValue
    ...
}

2

Sie können es so einfach machen:

Erstens: Zum Beispiel in Modellen haben Sie User.cs mit dieser Implementierung

public class User
 {
   public string username { get; set; }
   public string age { get; set; }
 } 

Wir übergeben das leere Modell an den Benutzer - Dieses Modell wird mit Benutzerdaten gefüllt, wenn er das Formular wie folgt sendet

public ActionResult Add()
{
  var model = new User();
  return View(model);
}

Wenn Sie die Ansicht nach leerem Benutzer als Modell zurückgeben, wird sie der Struktur des von Ihnen implementierten Formulars zugeordnet. Wir haben dies auf HTML-Seite:

@model MyApp.Models.Student
@using (Html.BeginForm()) 
 {
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Student</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.username, htmlAttributes: new { 
                           @class = "control-label col-md-2" })
            <div class="col-md-10">
                 @Html.EditorFor(model => model.username, new { 
                                 htmlAttributes = new { @class = "form-
                                 control" } })
                 @Html.ValidationMessageFor(model => model.userame, "", 
                                            new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.age, htmlAttributes: new { @class 
                           = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.age, new { htmlAttributes = 
                                new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.age, "", new { 
                                           @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" 
                 />
            </div>
        </div>
   </div>
}

Wenn Sie also auf "Senden" klicken, werden Sie es so verwenden

[HttpPost]
public ActionResult Add(User user)
 {
   // now user.username has the value that user entered on form
 }
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.