根据单选按钮选择将表单信息提交到数据库

时间:2014-05-19 01:58:22

标签: c# javascript mysql asp.net-mvc forms

有点丢失在这里的酱汁......漂亮的绿色进入ASP.net领域,但到目前为止一直在享受我的时间。

所以让我从头开始:

后台:我正在使用用户登录信息的ASP.net MVC5应用程序。用户将创建一个帐户,接收消息等。关键组件是网站上将有一个表单,允许用户在条件逻辑HTML表单中提交信息,包括单选按钮,文本区域等。我的最终目标是允许用户填写并提交表单,然后将其提交到MySQL数据库,向管理员和用户发送包含所选元素的电子邮件,然后在他们的“帐户仪表板”区域中填写他们的回复。 / p>

问题:我正在尝试根据HTML表单中的单选按钮选择获取用户提交的信息,这将有三种不同的情况:

  • 网络项目
  • 2D设计项目
  • 3D设计项目

因此,如果用户在“项目类型”表单字段中选择“Web”而不是“图形”,则他们将仅提交与“Web”相关的值。我遇到的问题是不能确定实现这个目标的最佳方法......

这是我在用户选择Web项目提交到数据库时开始创建的代码:

if (IsPost) && (RadioButton.projectType.Equals(Web))
{
    projectType = Request.Form["Web"];
    TypeOfWebsite = Request.Form["TypeOfWebsite"];
    DeviceExperience = Request.Form["DeviceExperience"];
}

以下是表单值:

<form method="post">
        <br />


        <div class="row">


            <label class="formquestion col-md-3">Project Name:</label>
            <input class="col-md-9" type="text" placeholder="Enter project name..." />


        </div>

        <div class="row">
            <label id="ProjectType" for="ProjectType" class="formquestion col-md-3">Project Type: </label>
            <span class="col-md-8">

                <input id="Web" name="ProjectType" type="radio" value="@Request.Form["Web"] value=" web" />
                <label for="Web">Web</label>

                <input id="Graphic" name="ProjectType" type="radio" value="Graphic" />
                <label for="Graphic">Graphic</label>

            </span>

        </div>



        <div class="hidefield" id="WebProject">
            <div class="row">

                <label class="formquestion col-md-3">Type Of Website: </label>


                <span class="col-md-8">

                    <input id="WebApplication" name="TypeOfWebsite" type="radio" value="1" />
                    <label class="Web Application" for="Web Application">Web Application*</label>


                    <input id="eCommerce" name="TypeOfWebsite" type="radio" />
                    <label class="choice" for="eCommerce">eCommerce</label>


                    <input id="SocialNetwork" name="TypeOfWebsite" type="radio" />
                    <label class="choice" for="SocialNetwork">Social Network</label>


                    <input id="Forum" name="TypeOfWebsite" type="radio" />
                    <label class="choice" for="Forum">Forum</label>


                    <input id="PackageDesign" name="TypeOfWebsite" type="radio" />
                    <label class="choice" for="PackageDesign">News/Article</label>


                    <input id="Interactive" name="TypeOfWebsite" type="radio" />
                    <label class="choice" for="Interactive">Interactive</label>


                    <input id="InformationalPersonal" name="TypeOfWebsite" type="radio" />
                    <label class="choice" for="InformationalPersonal">Informational/Personal</label>


                    <p>*Not exactly sure what a web application is? Well...think TurboTax, Zamzar, Mint, Online Banking Services, MailChimp and Google Docs. </p>


                </span>



            </div>


            <div class="row">


                <label class="formquestion col-md-3" for="DeviceExperience">Device Experience: </label>


                <span class="col-md-8">


                    <input id="Desktop" name="DeviceExperience" type="radio" value="1" />
                    <label for="Desktop">Desktop</label>


                    <input id="Tablet" name="DeviceExperience" type="radio" />
                    <label for="Tablet">Tablet</label>


                    <input id="Mobile" name="DeviceExperience" type="radio" />
                    <label for="Mobile">Mobile</label>


                    <input id="Responsive" name="DeviceExperience" type="radio" />
                    <label for="Responsive">Responsive</label>


                </span>


            </div>
        </div>


        <div class="hidefield" id="GraphicDimensions">
            <div class="row">


                <label class="formquestion col-md-3">Design Dimensions: </label>


                <span class="col-md-8">


                    <input id="2D" name="Dimension" type="radio" value="2D" />
                    <label class="choice" for="Web">2D</label>


                    <input id="3D" name="Dimension" type="radio" value="3D" />
                    <label for="3D">3D</label>


                </span>


            </div>
        </div>


        <div class="hidefield" id="2DGraphicProject">
            <div class="row">

                <label class="formquestion col-md-3">Choose 2D Design: </label>


                <span class="col-md-8">


                    <input id="BusinessCard" name="2DDesign" type="radio" value="1" />
                    <label class="BusinessCard" for="BusinessCard">Business Card</label>


                    <input id="Flyer" name="2DDesign" type="radio" />
                    <label class="choice" for="Flyer">Flyer</label>


                    <input id="Poster" name="2DDesign" type="radio" />
                    <label class="choice" for="Poster">Poster</label>



                    <input id="PrintAd" name="2DDesign" type="radio" />
                    <label class="choice" for="PrintAd">Print Ad</label>


                    <input id="PackageDesign" name="2DDesign" type="radio" />
                    <label class="choice" for="PackageDesign">Package Design (Food/Product/Media)</label>


                    <input id="Logo" name="Logo" type="radio" />
                    <label class="choice" for="Logo">Logo</label>


                </span>


            </div>
        </div>

        <div class="hidefield" id="hide3DDesignExplaination">

            <div class="row">
                <label class="formquestion col-md-3" for="3DDesign">Explain this 3D Design project: </label>
                <textarea id="3DDesignExplaination" name="3DDesignExplaination" class="textareaform"></textarea>


            </div>
        </div>

        <div class="hidefield" id="ProjectObjective">

            <div class="row">
                <label class="formquestion col-md-3" for="Objective">Project Objective:</label>
                <textarea id="ObjectiveExplaination" name="ObjectiveExplaination" class="textareaform" placeholder="What is this website's primary objective? Sell me on it!"></textarea>
            </div>
        </div>

        <div class="hidefield" id="DesignCopy">
            <div class="row">
                <label class="formquestion col-md-3" for="DesignCopy">Design Copy </label>
                <textarea id="DesignCopy" name="DesignCopy" class="textareaform" placeholder="Any messeging/text/info needed to be included?"></textarea>
            </div>
        </div>



        <div class="hidefield" id="TargetAudience">
            <div class="row">
                <label class="formquestion col-md-3" for="TargetAudience">Describe Your Target Audience:</label>
                <textarea id="TargetAudienceExplaination" name="TargetAudienceExplaination" class="textareaform" placeholder="Who is your target audience? What are their ages? What do they do for a living? Elaborate!"></textarea>
            </div>
        </div>

        <div class="hidefield" id="Keywords">
            <div class="row">
                <label class="formquestion col-md-3">Keywords To Describe This Project:</label>
                <input class="col-md-9" type="text" placeholder="Give me 3 keywords!">
            </div>
        </div>


        <div class="hidefield" id="FirstInteraction">
            <div class="row">
                <label class="formquestion col-md-3" for="UserFirstInteraction">User First Interaction:</label>
                <textarea id="UserFirstInteraction" name="UserFirstInteraction" class="textareaform" placeholder="What Should The User Do First Upon Visiting The Website?"></textarea>
            </div>
        </div>

        <div class="hidefield" id="General2">
            <div class="row">
                <label class="formquestion col-md-3" for="FavoriteColors">3 Favorite Colors?</label>
                <input type="text" class="a-popup" data-color-format="hex" value="GreenYellow">
                <input type="text" class="a-popup" data-color-format="hex" value="GreenYellow">
                <input type="text" class="a-popup" data-color-format="hex" value="GreenYellow">
                <small>Hint: you can type in any CSS color (even named ones, like yellow).</small>
                </p>
            </div>


            <div class="hidefield" id="Necessities">
                <div class="row">
                    <label class="formquestion col-md-3" for="UserFirstInteraction">Necessities:</label>
                    <textarea id="DesignCopy" name="ProjectReason" class="textareaform" placeholder="What are necessities for this project? Specific graphic/sitefunctionalities?"></textarea>
                </div>
            </div>

            <h5 class="bkgblack center-align col-md-11">Provide URL's of Site/Graphics (whatever is applicable) that design you admire</h5>

            <div class="row">
                <label class="formquestion col-md-3" for="AdmireURL1">URL #1: </label>
                <input id="AdmireURL1" name="AdmireURL1" type="text" maxlength="255" title="" value="http://" />
            </div>

            <div class="row">
                <label class="formquestion col-md-3" for="AdmireURL2">URL #2: </label>
                <input id="AdmireURL2" name="AdmireURL2" type="text" maxlength="255" title="" value="http://" />

            </div>
            <div class="row">
                <label class="formquestion col-md-3" for="AdmireURL3">URL #3: </label>
                <input id="AdmireURL3" name="AdmireURL3" type="text" maxlength="255" title="" value="http://" />
            </div>


            <div class="hidefield" id="RivalURL">
                <h5 class="bkgblack center-align col-md-11">Provide URL's for "competitor" sites:</h5>

                <div class="row">
                    <label class="formquestion col-md-3" for="RivalURL1">Rival URL #1: </label>
                    <input id="RivalURL1" name="RivalURL1" type="text" maxlength="255" title="" value="http://" />
                </div>

                <div class="row">
                    <label class="formquestion col-md-3" for="RivalURL2">Rival URL #2: </label>
                    <input id="RivalURL2" name="RivalURL2" type="text" maxlength="255" title="" value="http://" />

                </div>
                <div class="row">
                    <label class="formquestion col-md-3" for="RivalURL3">Rival URL #3: </label>
                    <input id="RivalURL3" name="RivalURL3" type="text" maxlength="255" title="" value="http://" />
                </div>
            </div>
        </div>

        <br />

        <div class="hidefield" id="ProjectReason">
            <div class="row">
                <label class="formquestion col-md-3" for="UserFirstInteraction">Project Reason:</label>
                <textarea id="DesignCopy" name="ProjectReason" class="textareaform" placeholder="Why does your target audience NEED this project to exist?"></textarea>
            </div>
        </div>



        <div class="row">
            <form action="file-upload.php" class="dropzone"></form>

        </div>


        <button type="submit" name="SubmitForm" class="btn btn-info btn-large">Submit Form</button>

    </form>

我一直在寻找各种MSDN教程以便更好地理解:

这些教程没有向我说明如何为我的表单创建这些基本的3个条件语句:

  • “如果用户选择了Project Type =”Web“并提交了表单,请将(插入表单变量)发送到数据库”
  • “如果用户选择了Project Type =”Graphic“,则Dimension =”2D“并提交表单,发送(插入相对值)到数据库”
  • “如果用户选择了Project Type =”Graphic“,则Dimension =”3D“并提交表单,发送(插入相对值)”到数据库“

回顾:

  • 如何编写条件语句来完成此操作?
  • 我是否应该重新考虑我使用的HTML表单格式,以支持ASP网页?

我编写了一些JavaScript来显示基于用户选择的可用表单值,以使用每个字段的“值”来遵循此模式。它按预期工作!现在我只想尝试连接点如何将这些信息提交到数据库,以便我可以在用户配置文件中使用它。任何想法/答案都会受到欢迎!

1 个答案:

答案 0 :(得分:0)

这是一种复杂的形式。但是,为了简单起见,我将减少表单中字段的数量,以便让您了解MVC的方式。

我首先要指出你没有充分利用MVC。它代表模型 - 视图 - 控制器,这是一种设计模式。你可能知道这些东西,但是,我没有看到你的代码中的提示告诉我你在项目中使用模型,你没有必要......但是因为你开始使用MVC你应该。所以,假设您有以下型号......

public class ProjectTypeModel
{
    public string Name { get; set; }
}

public class TestModel
{
    public IList<ProjectTypeModel> Types { get; set; }
}

然后你的视图声明了相同的模型......

@model  MvcTest.Models.TestModel

这位于视图文件的顶部,即第一行代码。简化形式看起来像这样......

@using(Html.BeginForm("ProcessTypes","Home")){
    <div class="row">
        <label class="formquestion col-md-3">Project Type: </label>
        <span class="col-md-8">

            @foreach (var p in Model.Types)
            {
                <input id="@("radio_" + p.Name)" type="radio" name="SelectedProjectType" value="@p.Name" />
                <label for="@("radio_" + p.Name)">@p.Name</label>
            }

        </span>

    </div>

    <input type="submit" name="SubmitForm" class="btn btn-info btn-large" value="Submit Form" />
    }

这里唯一要注意的是单选按钮必须具有相同的名称。 id不太相关,只是让它们唯一,这样你就可以为属性设置标签,这样当你点击标签时单选按钮会改变它的状态。最后要注意的是表单是发布到Home控件的“ProcessTypes”操作...

并且您的Home控制器的操作看起来与此类似......

public ActionResult ProcessTypes(string SelectedProjectType)
        {

            //processing here...
       }

显然,SelectedProjectType将带有您选择的单选按钮的值......“Web”或“Design”。

尽管这是一个非常简单的例子,但您可以了解MVC(和Razor)中的工作原理。还有一点要掩盖,但我相信你会自己找到。 希望它有意义