C#基础 Razor之与jQuery交互不得不说的坑

【我亦败了，扶着伤痕，却还是摸到了你的记忆的刀砧，我活成了老张，你活成了猫人】
2020年了，居然还有可恶的老系统，还有可恶的Razor，哎。。。。

代码通过@helper初始化数据,生成HtmlResult的类型数据

@helper Html_HourOptions()
{
    for (int i = 0; i < 24; i++)
    {
        <option value="@i">@i.ToString("00")</option>
    }
}
@helper Html_MinuteOptions()
{
    for (int i = 0; i < 60; i += 5)
    {
        <option value="@i">@i.ToString("00")</option>
    }
}

问题初始-换行

而在Jquery中需要调用以上数据，用来初始化一个下拉框

        //新增
        $('#btnAddGroup').click(function () {
                    var th3 = '<select id="hour_TeacherStartTime' + newGroupId+'">@Html_HourOptions</select>点';
            $($('#teacherTable tbody').children('tr').get(2)).append(th3);
        }

但是问题出现了，在Jquery中，若是直接使用@HtmlResult类型的数据，会出现换行。

但是@HtmlResult只有ToString()的方法，没有Split，只能先使用ToString(),然后再利用Replac方法
于是就有以下代码

//razor代码
    var hourOptions = Html_HourOptions().ToHtmlString().Replace("\r", "").Replace("\n", "");

PS：有一个ToHtmlString()的方法，但是他是调用了ToString()的方法（-_-），没啥意思

问题升级-双引号

问

但是又有了一个问题，因为toString之后的字段，是C#的string字符，如果直接添加就会多出一个双引号，于是添加无效。

            var th3 = '<select id="hour_TeacherStartTime' + newGroupId+'">@(hourOptions)</select>点';

结果如图

解

这里是把razor与jquery的忘了，当jQuery需要用到razor生成的string数据时，需要用到Html.Raw()。即

            var th3 = '<select id="hour_TeacherStartTime' + newGroupId+'">@(Html.Raw(hourOptions))</select>点';

额外(Dom元素与jQuery元素)

dom元素与jquery元素

            $($('#teacherTable tbody').children('tr').get(0)).append(th3);

对应html代码

<table class="table" id="teacherTable">
<tbody>
    <tr class=‘tr1’>
        <th rowspan="2" colspan="2">教工</th> 
    </tr>
    <tr>
    </tr>
    </tbody>
</table>

$(’#teacherTable tbody’).children(‘tr’).get(0)
Juqery元素：表示获取tbody下的第一个tr孩子节点（即上面tr1），这里表示的dom元素

$($(’#teacherTable tbody’).children(‘tr’).get(0))
dom元素：表示获取tbody下的第一个tr孩子节点（即上面tr1），这里表示的jquery元素

Jquery获取第一个子元素

DOM对象与jquery对象有什么不同