MVC 单页应用程序无法正常工作

MVC Single Page App Not Working Has Intended

你们好 :D,我承认我是 MVC 菜鸟。我正在做一个测试项目,让自己适应这个想法。它是超级简单的文本到十六进制程序。

我会分解它在做什么,然后会发生什么。

我有我的视图,它有一个文本区域和一个提交按钮。用户输入数据,点击提交。

@model MVC.Models.ClsTextToHex

@{
    ViewBag.Title = "Text To Hex";
}

<h2>Convert To Hex</h2>

<form method="post">
    <textarea name="message" style="margin: 0px; width: 313px; height: 150px"> @Model.HexText</textarea>

  <div>
    <input type="submit" value="Convert" />
  </div>
</form>

它转到控制器:

[HttpPost]
    public ActionResult CTHView(ClsTextToHex ConvertToHex, string message)
    {
        ConvertToHex.ConvertTTH(message, ConvertToHex.Hexed);
        return CTHView(ConvertToHex);
    }

Controller 然后与我的模型对话,该模型设置两个变量 1.RealText(包含原来的内容)和 2.Hexed(包含十六进制...)。然后我的控制器重新加载视图,视图现在显示十六进制而不是文本。

HexImage

但是,现在我想将十六进制转回文本。我的模型有代码,但由于模型每次都会重置,我无法跟踪任何内容以重新发送值或更新新值,它只是不断将文本转换为十六进制。

所以我的菜鸟问题归结为...我如何使用模型来处理我的变量数据每次都没有被清除的地方。还是我走错了路?我来自基于 C# 应用程序的背景,所以做这样的事情就像初始化 class、设置值并将它们传递出去一样简单……(虽然我真的不需要那样做,但是我可以)似乎有点棘手 asp.net...

我已经阅读了很多答案,也看过视频,在任何人说任何话之前,我想解决单个页面。说真的,我看不出有任何理由这不能是一页而不是两页,尽管我看到的大多数内容通常只是将您发送到一个外观相同的新页面,从而欺骗用户认为它是相同的页。我明白了这个概念,只是不知道它是如何在这里发挥作用的。

基本上每次转换纯文本时,您都需要在某处跟踪该信息(将纯文本转换为十六进制),以便下次提交表单时可以使用它来确定是转换为十六进制还是将其转换回纯文本。

由于Http是无状态的,我们需要在表单提交请求中发送状态。因此,每次将纯文本转换为十六进制时,在表单中保留一个值为 true 的布尔变量,并在提交表单时检查它。

您可以将此布尔值 属性 添加到您的视图模型 class。

public class ClsTextToHex
{
    public string Text { set; get; }
    public bool IsHex { set; get; }
}

在您看来,将其保存在隐藏变量中。基于此布尔值 属性,您也可以有条件地更新按钮文本。

@model YourNameSpaceGoesHere.ClsTextToHex
@using (Html.BeginForm("ToHex", "Home"))
{    
    @Html.HiddenFor(f => f.IsHex)
    @Html.TextAreaFor(f => f.Text)
    <div>
        @{
           var btnText = Model != null && Model.IsHex ? "Convert back" : "Convert to Hex";
        }
        <input type="submit" value="@btnText"/>    
    </div>
}

现在您所要做的就是在您的 HttPost 操作中检查这个 属性 值。重要的是要记住,因为我们正在更新视图模型的 属性 值并发送到同一个视图,我们需要明确地 清除模型状态字典 以便辅助方法(TextAreaForHiddenFor)将使用正确的(更新的)值。您可以使用 ModelState.Clear() 方法来执行此操作。

[HttpPost]
public ActionResult ToHex(ClsTextToHex model)
{
    if (!model.IsHex)
    {
        model.Text = "Hex" + model.Text;  // My temp hexification code :). Fix this
        model.IsHex = true;
    }
    else
    {
        //My temp un-hexification code :) Fix this with your actual code
        model.Text = model.Text.Replace("Hex", ""); 
        model.IsHex = false;
    }
    ModelState.Clear();  // This will clear the model state dictionary
    return View(model);
}