Question

这个论坛上充斥着在Windows窗体中处理这个问题的问题，但我想知道使用MVC（Razor）的这个机制的工作原理。

我有一个局部视图（或应该）用作绘图画布。此绘图画布仅包含文本控件。用户在输入字段中输入他的输入，POST提交它。然后在部分视图上正确显示文本。

Image displays canvas and the textarea inside that I want to move

现在，我想通过鼠标单击它来拖动文本周围的文本。在将来，我还想将位置保存到TextModel中的Position属性，以及拖动它的位置。这可能会限制解决方案的数量。

我该怎么做？我理解人们如何将鼠标事件添加到Windows窗体的代码隐藏窗体。但我不知道如何将此类事件添加到MVC中的ViewController中，如果这样做的话。

提前感谢您的帮助/建议。

Text.cshtml（索引）

@using TestMySmartPhotobook.Models;
@model TestMySmartPhotobook.Models.TextModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tekst</title>
    @Scripts.Render("~/bundles/jquery")
</head>
<body>
    <div>
        <div id="designer-canvas" class="col-md-4">
            <div id="PartialTextCanvas" style="width:200px; height:200px;">
                @{ Html.RenderPartial("PartialTextCanvas", Model); }
            </div>

        </div>

        <div id="content-builder" class="col-md-4">
            @using (Html.BeginForm("AddText", "Text", FormMethod.Post, new { id = "ValidationForm", name = "ValidationForm" }))
            {
                @Html.LabelFor(model => model.Text)
                @Html.TextAreaFor(model => model.Text, new { @id = "TextInput", @placeholder = "Text here." })

                <input type="submit" id="placeTxtBtn" value="Place Text" />
            }

        </div>


    </div>
    @Scripts.Render("~/bundles/LoadPartialCanvas")
</body>
</html>

PartialTextCanvas.cshtml

@using TestMySmartPhotobook.Models;
@model TestMySmartPhotobook.Models.TextModel
<h1>Text Partial</h1>
<div id="bookCanvas">
    @Html.TextAreaFor(model => model.Text, new { id = "tb", name="tb" } )

</div>

TextController.cs

// GET: Tekst
public ActionResult Text()
{
    return View(new TextModel());
}
[HttpPost]
public ActionResult AddText(TextModel model)
{
    return PartialView("PartialTextCanvas", model);
}

TextModel.cs

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using TestMySmartPhotobook.Domain;

namespace TestMySmartPhotobook.Models
{
    public class TextModel
    {
        public string Text
        {
            get;
            set;
        }
        public Color TextColor
        {
            get;
            set;
        }
        public int Size
        {
            get;
            set;
        }
        public int Height
        {
            get;
            set;
        }
        public Tilt Tilt
        {
            get;
            set;
        }
        public Position Position
        {
            get;
            set;
        }
        public Font Font
        {
            get;
            set;
        }
    }
}

在Razor PartialView上使用鼠标移动文本

0 个答案: