ADO.NET DataTable에 HTML 테이블 게시

c# asp.net-mvc razor asp.net-mvc-5


내보기에 아래와 같은 HTML 테이블이 있습니다.

<table id="tblCurrentYear">
    <tr>
        <td>Leave Type</td>
        <td>Leave Taken</td>
        <td>Leave Balance</td>
        <td>Leave Total</td>
    </tr>
    @foreach (var item in Model.LeaveDetailsList)
    {
        <tr>
            <td>@Html.TextBoxFor(m => item.LeaveType, new { width = "100" })</td>
            <td>@Html.TextBoxFor(m => item.LeaveTaken, new { width = "100" })</td>
            <td>@Html.TextBoxFor(m => item.LeaveBalance, new { width = "100" })</td>
            <td>@Html.TextBoxFor(m => item.LeaveTotal, new { width = "100" })</td>
        </tr>
    }
</table>

모든 html 테이블 행을 반복하고 ADO.NET DataTable에 값을 삽입하고 싶습니다.

간단히 말해서 HTML 테이블을 ADO.NET DataTable로 변환합니다.

HTML 테이블에서 값을 추출하고 ADO.NET DataTable에 삽입하는 방법?

보기는 다음 모델을 기반으로합니다.

public class LeaveBalanceViewModel
{
    public LeaveBalanceViewModel()
    {
        this.EmployeeDetail = new EmployeeDetails();
        this.LeaveBalanceDetail = new LeaveBalanceDetails();
        this.LeaveDetailsList = new List<LeaveBalanceDetails>();
    }
    public EmployeeDetails EmployeeDetail { get; set; }
    public LeaveBalanceDetails LeaveBalanceDetail { get; set; }
    public List<LeaveBalanceDetails> LeaveDetailsList { get; set; }
}




Answer 1 user3559349


포스트 백시 모델에 바인딩 하려면 양식 컨트롤 의 name 속성이 모델 속성과 일치해야합니다. foreach 루프를 사용 하면 올바른 이름 속성이 생성되지 않습니다. html을 검사하면 여러 인스턴스가 표시됩니다.

<input type="text" name="item.LeaveType" .../>

그러나 모델에 바인딩하려면 컨트롤이 필요합니다.

<input type="text" name="LeaveDetailsList[0].LeaveType" .../>
<input type="text" name="LeaveDetailsList[1].LeaveType" .../>

이것에 대해 생각하는 가장 쉬운 방법 은 C# 코드 에서 LeaveType 속성 값에 액세스하는 방법을 고려하는 것입니다.

var model = new LeaveBalanceViewModel();
// add some LeaveBalanceDetails instances to the LeaveDetailsList property, then access a value
var leaveType = model.LeaveDetailsList[0].LeaveType;

POST 메소드에는 매개 변수 이름 (예 : model )이 있으므로 접두사 ( model )를 삭제 하면 컨트롤의 이름 속성이 있어야합니다. 그렇게하려면 for 루프를 사용해야합니다 (컬렉션은 IList<T> 구현해야합니다 ).

for(int i = 0; i < Model.LeaveDetailsList.Count; i++)
{
    @Html.TextBoxFor(m => m.LeaveDetailsList[i].LeaveType)
    ....
}

또는 사용자 정의 EditorTemplate 을 사용하십시오 (컬렉션은 IEnumerable<T> 만 구현하면됩니다 )

에서 /Views/Shared/EditorTemplates/LeaveBalanceDetails.cshtml

@model yourAssembly.LeaveBalanceDetails
<tr>
    <td>@Html.TextBoxFor(m => m.LeaveType)</td>
    ....
</tr>

그런 다음 기본보기 (루프가 아님)

<table>
    .... // add headings (preferably in a thead element
    <tbody>
        @Html.EditorFor(m => m.LeaveDetailsList)
    </tbody>
</table>

마지막으로 컨트롤러에서

public ActionResult Edit(LeaveBalanceViewModel model)
{
    // iterate over model.LeaveDetailsList and save the items
}



Answer 2 lashja


요구 사항과 관련하여 이것을 시도하십시오

jQuery(document).on("change", ".DDLChoices", function (e) {
    var comma_ChoiceIds = '';
    var comma_ChoicesText = '';
    $('input[class="DDLChoices"]').each(function (e) {
        if (this.checked) {
            comma_ChoiceIds = comma_ChoiceIds + $(this).val() + ',';
            comma_ChoicesText = comma_ChoicesText + $(this).parent('label').parent() + ',';
        }
    });
    $('#ChoiceIds').val(comma_ChoiceIds);
    $('#ChoiceText').val(comma_ChoicesText);
});
@using (Html.BeginForm("Actionname", "Controllername", FormMethod.Post, new { id = "frmChoices" }))
{

    @Html.HiddenFor(m => m.ChoiceText, new { @id = "ChoiceText" })
    @Html.HiddenFor(m => m.ChoiceIds, new { @id = "ChoiceIds" })
    <div class="form-group">
        <div>
            <table>
                <tr>
                    <th>Name</th>
                    <th>Selected</th>
                </tr>
                @foreach (var item in @Model.Choices)
                {
                    <tr>
                        <td> <label>@item.ChoicesText</label>    </td>
                        <td> <input class="DDLChoices" value="@item.ChoiceIds" type="checkbox" /></td>
                    </tr>
                }
            </table>
        </div>
     <input type="button" value="Submit" onclick="return ChoicesPoster.passChoices()"
    </div>
}