故障输入和按钮出现在右侧

本文关键字：输入 按钮 故障 | 更新日期: 2023-09-27 18:25:47

我正在做一个项目，最后四项任务之一是制定订单。我一直在努力让按钮出现在我想要的地方。我真的很难理解，说实话，我很难解释我的需求。但是，我会尽力的。

我想发布一张照片，但由于需要的声誉水平，这不是一个选择。这将以一种简单的方式真正解释我想要和需要什么。

我试着解释一下它的样子。我有一张由三列组成的表格，生产编号、名称和价格。行中的每个人相应地显示其有关产品的数据。现在，我需要的是两个投入，一个用于价格，另一个用于回扣。我还需要列表中的每个产品都有一个按钮。

这是一种表述。

Prod.no    Name      Price
100        Laser     199     [Input for own price]   [input for rebate]  (Button submit)

我想我可以简单地使用td并为输入和按钮添加代码，但这没有奏效。我甚至不确定这是否可能实现。

有人能给我一个如何做这件事的建议吗？无论是谷歌还是SO，我尝试过的所有例子最终都会排在首位，而不是我想要的位置

以下是负责的cshtml文件和一些代码：

model ListModel
@{
IEnumerable<Incendo.Core.Domain.External.ExternalAttribute> cols = (IEnumerable<Incendo.Core.Domain.External.ExternalAttribute>)Model.Aggregates;
}
@if (EngineContext.Current.Resolve<IWorkContext>().WorkingCustomer != null)
{
<div class="customerProducts">
    @if (EngineContext.Current.Resolve<IWorkContext>().WorkingCustomer.CreditDenied == 1)
    {
        <p class="field-validation-error">Kreditspärr - orderläggning ej möjlig</p>
    }
    else
    {
    var columnIds = cols.Select(m => m.ColumnId).ToList();
    var colNames = cols.Select(m => m.Name).ToList();
    var grid = new WebGrid(
        source: Model.Data,
        columnNames: colNames
        );
    var outString = String.Empty;
    var values = cols.Select(m => m.ExternalAttributeValues).FirstOrDefault();
    if(values != null)
    {
    outString += "<table>";
    var totalCount = values.Count;
    outString += "<thead>";
    outString += "<tr>";
    foreach(var name in colNames)
    {
        if (name != "Prod. typ")
        {
            outString += "<th>" + name + "</th>";
        }            
    }
    //outString += "<th>" + "Beställning" + "</th>";
    outString += "</tr>";
    outString += "</thead>";
    outString += "<tbody>";
    for(int row = 0; row < values.Count; row++)
    {
        outString += "<tr>";
        for (int name = 0; name < columnIds.Count; name++)
        {
            var col = cols.SingleOrDefault(m => m.ColumnId == columnIds[name]);
            if (col.Column.TextTypeNo > 0)
            {
                //outString = outString + String.Format("<td>[{0}] +++ {1}</td>", col.ExternalAttributeKeyValues[row].Key, col.ExternalAttributeKeyValues[row].Value);                        
            }
            else
            {
                outString = outString + String.Format("<td>{0}</td>", col.ExternalAttributeKeyValues[row].Value);                                                
            }                    
        }
        var prodNr = cols.ElementAt(0).ExternalAttributeKeyValues[row].Value;
        //outString += String.Format("<td> <input type='"submit'" />    {0}</td>", prodNr);
        //outString += String.Format("<td> <input name='"submit'" type='"submit'" id='"submit'" value='"Lägg'" />    {0}</td>", prodNr);           
        outString += "<td>"
            + "<input type='"submit'" />"
            +"</td>";
        //outString += "<input type='"submit'" />";
        outString += "</tr>";
    }
outString += "</tbody>";
outString += "</table>";
}

@Html.Raw(outString)
    }
</div>
}

我确信该代码不是必需的，因为它只返回一些外部属性（prod.no、name、price等）我的计划是使用产品的id作为按钮的标识符，这样，如果用户在其中写入了内容，就可以使用这两个输入，并进行订单。

我在Html.BeginForm中看到过一些东西，但由于我相信为了让订单通过，必须将输入传递给操作控制器和负责按钮单击的操作方法。

希望有人能告诉我哪里做错了。我真的不认为这应该是一个这样的问题，但我对这一切都是新手。

以下是全部输出：

<!DOCTYPE html>
<html class="ui-mobile">
<head>
    <meta charset="utf-8" />
    <title>Details</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <script src="/Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/fastclick.min.js" type="text/javascript"></script>
    <link href="/Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/kendo.all.min.js" type="text/javascript"></script>
    <script src="/Scripts/kendo.aspnetmvc.min.js"></script>
    <script src="/Scripts/Mobile/Incendo.UI.Menu.js" type="text/javascript"></script>
    <script src="/Scripts/public.common.js" type="text/javascript"></script> 
    <script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <link href="/Content/Layout.css" rel="stylesheet" type="text/css" />
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <menu id="menu">
        <ul class="t-widget t-reset t-header t-menu" id="Admin"><li class="t-item t-state-default"><span class="t-link">Mina sidor<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/">Dashboard</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Produkter<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Product/List">Produkter</a></li><li class="t-item t-state-default"><a class="t-link" href="/Product/Search">S&#246;k produkt</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Leverant&#246;rer<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Supplier/List">Leverant&#246;rer</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Kunder<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Customer/List">Kunder</a></li><li class="t-item t-state-default"><a class="t-link" href="/Customer/Create">Ny kund</a></li><li class="t-item t-state-default"><a class="t-link" href="/Customer/Search">S&#246;k kund</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">F&#246;rs&#228;ljning<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Orders/List">S&#246;k order</a></li><li class="t-item t-state-default"><a class="t-link" href="/ShoppingCart/Cart">Aktuell order</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Inst&#228;llningar<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Settings/Customer">Kund</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Anv&#228;ndare<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/User/List">Anv&#228;ndare</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">System<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/Common/SystemInfo">Systeminformation</a></li><li class="t-item t-state-default"><a class="t-link" href="/Common/ClearCache">Rensa cache</a></li><li class="t-item t-state-default"><a class="t-link" href="/Common/RestartApplication">Starta om applikation</a></li></ul></li><li class="t-item t-state-default"><span class="t-link">Mina inst&#228;llningar<span class="t-icon t-arrow-down"></span></span><ul class="t-group"><li class="t-item t-state-default"><a class="t-link" href="/User/Settings">Inst&#228;llningar</a></li><li class="t-item t-state-default"><a class="t-link" href="/Account/Logout">Logga ut</a></li></ul></li></ul><script type="text/javascript">
//    $(document).ready(function () {
//        $("#Admin").kendoMenu();
//    });
</script>
    </menu>
    <section id="pagebody" data-role="page" class="pages ui-page ui-body-c ui-page-active container" id="home" data-url="home">
    <div data-role="header" class="ui-header ui-bar-a" role="banner">
            <a href="#" class="showMenu" data-theme="a">Menu</a>
            <div class="login-info">
                <div class="clearfix"></div>
            </div>
        </div>
<div id="dialog-notifications-success" title="Common.Notification" style="display:none;">
</div>
<div id="dialog-notifications-error" title="Fel" style="display:none;">
</div>
<div id="bar-notification" class="bar-notification">
    <img src="/Content/Images/ico-close-notification-bar.png" class="close" alt="Close" title="Close" />
</div>
                    <div data-role="content-header" class="">
            <div class="userinfobar">
            <h1>UserInfoBar.cshtml</h1>
            <form action="/Common/FirmSelected?Length=6" data-ajax="true" data-ajax-complete="onFirmChangedRequestCompleted();" id="form-firmselector" method="post"><select id="userfirm" name="userfirm" onChange="onFirmChanged();"><option value="3">F0002 - BB</option>
<option selected="selected" value="1">F0001 - BB AB</option>
</select></form>    <script type="text/javascript">
        function onFirmChanged() {
            $("#form-firmselector").submit();
        }
        function onFirmChangedRequestCompleted() {
            location.reload();
        }
    </script>
0                 <div id="workingCustomerSection-active">
                    <p>Aktuell kund</p>
                        <p><a href="/Customer/Details/100001">Cykellagret AB</a></p>

                    <a class="button" data-ajax="true" data-ajax-method="Post" data-ajax-success="clearWorkingCustomerSuccess" href="/User/ClearWorkingCustomer/0">Anv&#228;nd inte aktuell kund</a>
<script type="text/javascript">
    function clearWorkingCustomerSuccess(e) {
        handleResponse(e);
        location.reload();
    }
</script>
                </div>
            </div>                        
                    </div>
        <div data-role="content" class="ui-content" role="main">
            <div class="ajax-loading-block-window" style="display: none">
                <div class="loading-image">
                </div>
            </div>
            <h2>Cykellagret AB</h2>
<section id="custhead" class="clearfix">    
    <dl class="table-display">
        <dt>Kundnr</dt>
        <dd>100001</dd>
        <dt>Adress</dt>
        <dd>Strandv&#228;gen 4</dd>
        <dt>Telefonnr</dt>
        <dd>99887766</dd>
    </dl>
</section>
<h1>Details.cshtml</h1>
<div id="buttonbar">

<a class="button" data-ajax="true" data-ajax-method="Post" data-ajax-success="clearWorkingCustomerSuccess" href="/User/ClearWorkingCustomer/0">Anv&#228;nd inte aktuell kund</a>
<script type="text/javascript">
    function clearWorkingCustomerSuccess(e) {
        handleResponse(e);
        location.reload();
    }
</script><a href="tel:99887766" class="phone button">Ring</a>
</div>
<div id="tabStrip">
    <ul>
        <li>Leveransinfo</li>        <li>Kundgrupp</li>        <li>S&#228;ljare</li>        <li>Kontaktpersoner</li>        <li>Sortiment</li>        <li>Avtal</li>        <li>&#214;ppna kundposter</li>        <li>Aktiviteter</li>        <li>Produkter</li>    </ul>
    <div class="clearfix">
        <dl class="table-display">
            <dt>Ledtid</dt>
            <dd></dd>
            <dt>Leveransdagar</dt>
            <dd></dd>
            <dt>Orderstopptid</dt>
            <dd></dd>
            <dt>Namn</dt>
            <dd>Cykellagret AB</dd>
            <dt>3PL Kundnummer</dt>
            <dd></dd>
            <dt>3PL Status</dt>
            <dd></dd>
            <dt>Kreditsp&#228;rr</dt>
            <dd>0</dd>
        </dl>               
    </div>
    <div class="clearfix">
        <dl class="table-display">
            <dt>Kedjetillh&#246;righet</dt>
            <dd></dd>
            <dt>Kategori</dt>
            <dd></dd>
            <dt>Kundstatus</dt>
            <dd></dd>
            <dt>Kundkategori</dt>
            <dd></dd>
        </dl>               
    </div>
    <div class="clearfix">
        <dl class="table-display">
            <dt>S&#228;ljare</dt>
            <dd>120</dd>
            <dt>Senaste kontakt</dt>
            <dd></dd>
        </dl>               
    </div>
    <div class="clearfix">
    <button type="button" id="createContactButton">Ny kontaktperson</button>
    <table id="contacts">
        <thead>
            <tr>
                <th>Namn</th>
                <th>Telefon</th>
                <th>Email</th>
            </tr>
        </thead>
        <tr>
            <td>Marie H&#246;ljer</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Carl von Friesenwind</td>
            <td></td>
            <td></td>
        </tr>
    </table>
<div id="createContactWindow"></div>
    <script type="text/javascript">
        $(function () {
        var btn = $("#createContactButton");
        btn.click(
        function(){
            initKendoWindow();
            var window = $("#createContactWindow").data("kendoWindow").open();
            window.center();
            window.refresh('/Customer/CreateContactPerson/1001');
            btn.hide();
        });
        var onClose = function () {
            btn.show();
        }
        function initKendoWindow() {
            if (!$("#createContactWindow").data("kendoWindow")) {
                $("#createContactWindow").kendoWindow({
                    title: 'Skapa kontaktperson',
                    visible: false,
                    modal: true,
                    close: onClose
                }).data("kendoWindow");
            }
        }
    })
        </script>

            </div>
    <div class="clearfix">
    <p>Assortment.NoAssortment</p>
    <script type="text/javascript">
        $(function () {
            $(".assortmentbox").change(function (e) {
                $.ajax({
                    type: "POST",
                    data: JSON.stringify({
                        customerNo: 100001,
                        family: this.id.split('_')[0],
                        status: this.id.split('_')[1],
                        enabled: this.checked
                    }),
                    url: "/Assortment/ChangeStatus",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                    }
                });
            });
        });
    </script>    </div>
    <div class="clearfix">
        <dl class="table-display">
            <dt>Avtal med</dt>
            <dd></dd>
            <dt>Till datum</dt>
            <dd>0</dd>
            <dt>Grossist</dt>
            <dd></dd>
            <dt>Bryggeri</dt>
            <dd></dd>
        </dl>               
    </div>
    <div class="clearfix">

<table><thead><tr><th>Fakt. nr</th><th>Reg. datum</th><th>Belopp</th><th>Restbelopp</th><th>Förf. datum</th></tr></thead><tbody><tr><td class="field-validation-error">98500040</td><td class="field-validation-error">20080924</td><td class="field-validation-error">3664,05</td><td class="field-validation-error">3664,05</td><td class="field-validation-error">20081004</td></tr><tr><td class="field-validation-error">98500029</td><td class="field-validation-error">20080716</td><td class="field-validation-error">13591,23</td><td class="field-validation-error">13591,23</td><td class="field-validation-error">20080726</td></tr><tr><td>98500002</td><td>20081211</td><td>918,75</td><td>918,75</td><td>20130801</td></tr><tr><td class="field-validation-error">98100148</td><td class="field-validation-error">20081222</td><td class="field-validation-error">281288</td><td class="field-validation-error">281288</td><td class="field-validation-error">20070121</td></tr><tr><td class="field-validation-error">98100120</td><td class="field-validation-error">20081009</td><td class="field-validation-error">6638</td><td class="field-validation-error">6638</td><td class="field-validation-error">20081108</td></tr></tbody></table>    </div>
    <div class="clearfix">
<button type="button" id="createAppointmentButton" class="button">Ny aktivitet</button>
<div id="window"></div>
Inga aktiviteter ännu på kunden<script type="text/javascript">
    $(function () {
        var btn = $('#createAppointmentButton');
        btn.click(
        function () {
            initKendoWindow();
            var window = $("#window").data("kendoWindow").open();
            window.center();
            window.refresh('/Appointments/CreateAppointment/100001/');
            btn.hide();
        });
        var onClose = function () {
            btn.show();
        }
        function initKendoWindow() {
            if (!$("#window").data("kendoWindow")) {
                $("#window").kendoWindow({
                    title: 'Skapa aktivitet',
                    visible: false,
                    modal: true,
                    close: onClose
                }).data("kendoWindow");
            }
        }
    })
</script>    </div>
    <div class="clearfix">

    <div class="customerProducts">
<table><thead><tr><th>Prod. nr</th><th>Namn</th><th>Pris</th></tr></thead><tbody><tr><td>1000</td><td>PRODUKT LAGERFÖRD (MALL)</td><td>0</td><td><input type="submit" /></td></tr><tr><td>1010</td><td>PRODUKT EJ LAGERFÖRD (MALL)</td><td>0</td><td><input type="submit" /></td></tr><tr><td>11</td><td>Celerifere</td><td>0</td><td><input type="submit" /></td></tr><tr><td>111</td><td>Framhjul, komplett modell landsväg</td><td>0</td><td><input type="submit" /></td></tr><tr><td>112</td><td>Framhjul, komplett modell mountain</td><td>0</td><td><input type="submit" /></td></tr><tr><td>113</td><td>Bakhjul, komplett modell landsväg</td><td>0</td><td><input type="submit" /></td></tr><tr><td>114</td><td>Bakhjul, komplett modell mountain</td><td>0</td><td><input type="submit" /></td></tr><tr><td>115</td><td>Mono-hjul</td><td>0</td><td><input type="submit" /></td></tr><tr><td>12</td><td>Sauerbronn</td><td>0</td><td><input type="submit" /></td></tr><tr><td>121</td><td>Ram, landsväg</td><td>0</td><td><input type="submit" /></td></tr><tr><td>122</td><td>Ram, mountain</td><td>0</td><td><input type="submit" /></td></tr><tr><td>123</td><td>Ram, mono</td><td>0</td><td><input type="submit" /></td></tr><tr><td>13</td><td>Vector</td><td>0</td><td><input type="submit" /></td></tr><tr><td>131</td><td>Kraftöverföringspaket Eddy</td><td>0</td><td><input type="submit" /></td></tr><tr><td>1311</td><td>Pedal</td><td>0</td><td><input type="submit" /></td></tr><tr><td>1312</td><td>Kedja</td><td>0</td><td><input type="submit" /></td></tr><tr><td>1313</td><td>Kugghjul</td><td>0</td><td><input type="submit" /></td></tr><tr><td>132</td><td>Kraftöverföringspaket Alfredo</td><td>0</td><td><input type="submit" /></td></tr><tr><td>133</td><td>Kraftöverföringspaket Harry</td><td>0</td><td><input type="submit" /></td></tr><tr><td>134</td><td>Kraftöverföringspaket mono</td><td>0</td><td><input type="submit" /></td></tr><tr><td>141</td><td>Styranordning Leon</td><td>0</td><td><input type="submit" /></td></tr><tr><td>142</td><td>Styranordning Drais</td><td>0</td><td><input type="submit" /></td></tr><tr><td>143</td><td>Styranordning Karl</td><td>0</td><td><input type="submit" /></td></tr><tr><td>151</td><td>Sadel Gösta</td><td>0</td><td><input type="submit" /></td></tr><tr><td>152</td><td>Sadel Bernt</td><td>0</td><td><input type="submit" /></td></tr><tr><td>153</td><td>Sadel Ronaldo</td><td>0</td><td><input type="submit" /></td></tr><tr><td>154</td><td>Sadel mono</td><td>0</td><td><input type="submit" /></td></tr><tr><td>161</td><td>Dekalpaket Celerifere</td><td>0</td><td><input type="submit" /></td></tr><tr><td>162</td><td>Dekalpaket Sauerbronn</td><td>0</td><td><input type="submit" /></td></tr><tr><td>163</td><td>Dekalpaket Vector</td><td>0</td><td><input type="submit" /></td></tr><tr><td>164</td><td>Dekalpaket Dandy-horse</td><td>0</td><td><input type="submit" /></td></tr><tr><td>165</td><td>Dekalpaket Michaux</td><td>0</td><td><input type="submit" /></td></tr><tr><td>166</td><td>Dekalpaket Singleton</td><td>0</td><td><input type="submit" /></td></tr><tr><td>171</td><td>Pakethållare Backpack</td><td>0</td><td><input type="submit" /></td></tr><tr><td>200</td><td>Debiterbar tid</td><td>0</td><td><input type="submit" /></td></tr><tr><td>201</td><td>Arbetstimmar service</td><td>0</td><td><input type="submit" /></td></tr><tr><td>22</td><td>Michaux</td><td>0</td><td><input type="submit" /></td></tr><tr><td>23</td><td>Singleton</td><td>0</td><td><input type="submit" /></td></tr><tr><td>505</td><td>Testprodukt</td><td>0</td><td><input type="submit" /></td></tr></tbody></table>    </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#tabStrip").kendoTabStrip();
    });
</script>
        </div>
    </section>
</body>
</html>

更新：

添加了这段代码后，我设法得到了我想要的东西，但它确实很难看。

outString += "<td>"
            + "<label>Överstyrt pris</label>"
            + "<label>Rabatt (%)</label>"
            + "<input type='"text'" id='"overridePrice" + prodNr + "'" value='"0'" >"
            + "<input type='"text'" id='"rebate" + prodNr + "'" value='"0'" >"
            + "<button type='"button'" id='"addOrder" + prodNr + "'" ONCLICK='"window.location.href=''/CustomerProducts/AddProductToCart'''" class='"button'">Lägg</button>"
            + ""
            +"</td>";

这是让输入字段和按钮出现在我想要的地方的唯一方法。我不太懂CSS，所以必须这样做。onclick的事情非常可怕，但是使用这种方法ajax或jscript是不可能的。

故障输入和按钮出现在右侧

我不确定我是否完全理解您，但如果您希望页面上有多个按钮，我建议使用button html元素，而不是"input-type=‘submit’"。这样，你就可以随心所欲地拥有。

有关按钮元素的信息，请参见此处：http://www.w3schools.com/tags/tag_button.asp

相关文章：